JSON: parse и stringify

JSON (JavaScript Object Notation) — универсальный формат обмена данными. Именно JSON летит между фронтендом и бэкендом во всех современных API. Два метода: JSON.parse() и JSON.stringify() — всё что нужно знать.

📋 Что такое JSON?

JSON — это текстовый формат для представления данных. Он основан на синтаксисе объектов JavaScript, но является самостоятельным форматом и понимается практически всеми языками программирования. Когда сервер отвечает на запрос, он обычно присылает именно строку в формате JSON.

// Так выглядит JSON — это обычная строка
const jsonString = '{"name":"Иван","age":25,"active":true}';

// Или сложнее:
const jsonString2 = `{
  "user": {
    "id": 42,
    "name": "Мария",
    "tags": ["admin", "editor"],
    "address": null
  }
}`;

🔓 JSON.parse() — строка → объект

JSON.parse(строка) превращает JSON-строку в JavaScript-объект. Именно так мы обрабатываем данные, пришедшие с сервера или из localStorage.

const jsonString = '{"name":"Иван","age":25,"scores":[10,20,30]}';

const user = JSON.parse(jsonString);

console.log(user.name);    // 'Иван'
console.log(user.age);     // 25 (число!)
console.log(user.scores);  // [10, 20, 30] (массив!)

// Теперь это полноценный JS-объект
console.log(typeof user);  // 'object'

// Безопасное парсирование
function safeParse(str) {
  try {
    return JSON.parse(str);
  } catch (e) {
    console.error('Невалидный JSON:', e.message);
    return null;
  }
}

🔒 JSON.stringify() — объект → строка

JSON.stringify(объект) превращает JavaScript-объект в JSON-строку. Используется для отправки данных на сервер или сохранения в localStorage (который хранит только строки).

const user = {
  name: 'Мария',
  age: 30,
  active: true,
  scores: [95, 87, 100]
};

const jsonString = JSON.stringify(user);
console.log(jsonString);
// '{"name":"Мария","age":30,"active":true,"scores":[95,87,100]}'

console.log(typeof jsonString); // 'string'

Pretty print — красивое форматирование для чтения человеком. Третий аргумент JSON.stringify(obj, null, 2) добавляет отступы в 2 пробела:

console.log(JSON.stringify(user, null, 2));
// {
//   "name": "Мария",
//   "age": 30,
//   "active": true,
//   "scores": [
//     95,
//     87,
//     100
//   ]
// }

🚧 Ограничения JSON — что не сериализуется

JSON поддерживает не все типы данных JavaScript. Некоторые типы при сериализации теряются или преобразуются:

// Демонстрация ограничений
const obj = {
  name: 'Тест',
  fn: () => 'привет', // исчезнет
  date: new Date(),   // станет строкой
  undef: undefined,   // исчезнет
  nan: NaN,           // станет null
};

console.log(JSON.stringify(obj));
// {"name":"Тест","date":"2024-...","nan":null}
// fn и undef пропали!

✅ Итоги урока

• JSON — текстовый формат данных, стандарт обмена между фронтом и бэком
• JSON.parse(строка) — превращает JSON-строку в JS-объект
• JSON.stringify(объект) — превращает JS-объект в JSON-строку
• JSON.stringify(obj, null, 2) — pretty print с отступами
• JSON не поддерживает: undefined, функции, Symbol — они удаляются при stringify
• Date → строка, NaN/Infinity → null при сериализации
• JSON.parse() на невалидной строке кидает SyntaxError — используй try/catch