JS Core

JSON

Научиться преобразовывать данные в текст (JSON.stringify) и обратно (JSON.parse), понимая, зачем нужен JSON и его ограничения.

Начальный (Beginner)
Нужно знать:Дата и время (Date)

Кратко

JSON (JavaScript Object Notation) — текстовый формат для обмена данными. JSON.stringify() превращает данные в текст. JSON.parse() превращает текст обратно в данные. JSON используется повсеместно: API, файлы конфигурации, localStorage.


Подробно

JSON — это текстовый формат:

  • Объекты: { "key": "value" } (ключи в кавычках!)
  • Массивы: [1, 2, 3]
  • Строки: "text" (двойные кавычки)
  • Числа: 42
  • Boolean: true/false
  • null

JSON.stringify(value) — данные → текст: const user = { name: 'Анна', age: 25 }; const json = JSON.stringify(user); // '{"name":"Анна","age":25}'

JSON.parse(text) — текст → данные: const data = JSON.parse(json); // { name: 'Анна', age: 25 }

Ограничения JSON:

  • Только строки, числа, boolean, null, массивы, объекты
  • Ключи ТОЛЬКО в двойных кавычках
  • Нет: undefined, функции, Date, Symbol

JSON + localStorage: localStorage.setItem('user', JSON.stringify(user)); const saved = JSON.parse(localStorage.getItem('user'));


Ментальная модель

JSON — как переводчик между JavaScript и другими языками. Он превращает JavaScript-данные в текст, который понимает любой язык программирования.


Примеры

**Самый простой:**

javascript
const data = { name: 'Анна', age: 25 };
const json = JSON.stringify(data);
console.log(json); // '{"name":"Анна","age":25}'

const back = JSON.parse(json);
console.log(back.name); // 'Анна'

JSON.stringify превращает объект в текст. JSON.parse — обратно.

**Простой:**

javascript
const users = [
  { name: 'Анна', age: 25 },
  { name: 'Пётр', age: 30 }
];

const json = JSON.stringify(users, null, 2);
console.log(json);
// [
//   { "name": "Анна", "age": 25 },
//   { "name": "Пётр", "age": 30 }
// ]

Третий аргумент — количество пробелов для форматирования (pretty print).

**Реальный пример:**

javascript
const user = {
  name: 'Анна',
  greet: function() { return 'Привет'; }
};

const json = JSON.stringify(user);
const back = JSON.parse(json);

console.log(back); // { name: 'Анна' }
console.log(back.greet); // undefined (функции не сериализуются!)

JSON.stringify теряет функции, undefined, Symbol. Это ограничение формата.


Частые ошибки

**Неправильно:** Думать, что JSON — это JavaScript

**Почему:** JSON — это текстовый формат данных. Он похож на JavaScript, но не является им.

**Правильно:** JSON — формат данных. JavaScript — язык программирования.

**Неправильно:** Использовать одинарные кавычки в JSON

**Почему:** JSON требует двойные кавычки для ключей и строк: { "key": "value" }

**Правильно:** JSON: двойные кавычки. JavaScript: любые кавычки.

**Неправильно:** Забывать, что JSON.stringify() теряет функции

**Почему:** Функции, undefined, Symbol, Date (без кастомного сериализатора) не попадают в JSON.

**Правильно:** Проверяйте, что данные совместимы с JSON перед сериализацией.


Важно запомнить

  • JSON.stringify() — данные → текст
  • JSON.parse() — текст → данные
  • JSON: строки, числа, boolean, null, массивы, объекты
  • Ключи ТОЛЬКО в двойных кавычках
  • Функции и undefined не сериализуются

Связь

Назад: Вы знаете объекты и массивы (J11-J18) — JSON это формат, которым мы обмениваемся такими данными.

Вперёд: Следующий урок (J21) — методы чисел: инструменты для работы с числами.

Материалы курса JS Core — PROlab Academy.