JSON.stringify и JSON.parse

JSON - это текстовый формат для передачи и хранения данных. В JavaScript есть встроенные методы:

• JSON.stringify - превратить значение в JSON-строку
• JSON.parse - превратить JSON-строку обратно в значение

JSON похож на объекты и массивы, но у него есть строгие правила.

1) JSON.stringify: объект в строку

const user = { id: 1, name: "Sam", isActive: true };

const json = JSON.stringify(user);

console.log(json); // {"id":1,"name":"Sam","isActive":true}
console.log(typeof json); // "string"

Массив тоже можно сериализовать:

const nums = [1, 2, 3];

const json = JSON.stringify(nums);

console.log(json); // [1,2,3]

2) JSON.parse: строку в объект

const json = '{"id":1,"name":"Sam","isActive":true}';

const user = JSON.parse(json);

console.log(user); // { id: 1, name: "Sam", isActive: true }
console.log(typeof user); // "object"

3) Читабельное форматирование (pretty print)

У JSON.stringify есть параметры для форматирования:

• второй аргумент (replacer) чаще не нужен на старте
• третий аргумент - отступы

const data = { id: 1, name: "Sam", tags: ["js", "web"] };

const pretty = JSON.stringify(data, null, 2);

console.log(pretty);

Результат будет удобнее читать:

{
  "id": 1,
  "name": "Sam",
  "tags": [
    "js",
    "web"
  ]
}

4) JSON строгий: важные отличия от JavaScript-объектов

JSON поддерживает только:

• числа
• строки (в JSON только двойные кавычки)
• boolean
• null
• массивы
• объекты

В JSON нельзя:

• функции
• undefined
• symbol
• комментарии
• trailing commas (запятые в конце)
• одиночные кавычки для строк

Примеры ограничений:

undefined и функции исчезают

const obj = {
  a: 1,
  b: undefined,
  c: function () { return 1; }
};

const json = JSON.stringify(obj);

console.log(json); // {"a":1}

NaN и Infinity превращаются в null

const data = { n: NaN, i: Infinity, ok: 1 };

console.log(JSON.stringify(data)); // {"n":null,"i":null,"ok":1}

Date превращается в строку

const data = { createdAt: new Date("2025-01-01T00:00:00Z") };

const json = JSON.stringify(data);
console.log(json);

const parsed = JSON.parse(json);
console.log(parsed.createdAt);
console.log(typeof parsed.createdAt); // "string"

5) Ошибки парсинга: try/catch

Если строка не является валидным JSON, JSON.parse выбросит SyntaxError. Это нормальная ситуация для “внешних” данных.

const input = '{ "a": 1, }';

try {
  const data = JSON.parse(input);
  console.log(data);
} catch (e) {
  console.log(e.name); // "SyntaxError"
}

6) JSON и localStorage: частый сценарий

localStorage хранит только строки, поэтому данные обычно сериализуют и парсят.

const state = { theme: "dark", fontSize: 14 };

localStorage.setItem("appState", JSON.stringify(state));

const raw = localStorage.getItem("appState");
const restored = raw ? JSON.parse(raw) : null;

console.log(restored); // { theme: "dark", fontSize: 14 }

7) JSON не равен “глубокая копия”

Иногда делают копию через JSON:

const a = { x: 1, nested: { y: 2 } };

const b = JSON.parse(JSON.stringify(a));

b.nested.y = 99;

console.log(a.nested.y); // 2
console.log(b.nested.y); // 99

Это действительно создает отдельную структуру, но есть минусы:

• теряются Date, undefined, функции, NaN, Infinity
• не работает с циклическими ссылками

Пример циклической ссылки:

const a = {};
a.self = a;

try {
  JSON.stringify(a);
} catch (e) {
  console.log(e.name); // "TypeError"
}

Поэтому JSON-копирование - прием только для простых данных.

Что стоит запомнить

• JSON.stringify превращает значение в строку JSON.
• JSON.parse превращает JSON-строку обратно в данные.
• JSON строгий: нет функций, undefined, комментариев, запятых в конце.
• Для парсинга внешних данных часто нужен try/catch.
• JSON-подход подходит для хранения и передачи простых структур.