> Как работает JSON и как передается информация с его помощью? (JavaScript)

Короткий ответ

JSON - это текстовый формат обмена данными, основанный на синтаксисе объектов JavaScript, но независимый от языка. Он представляет данные в виде пар "ключ-значение" и упорядоченных списков. Передача информации происходит через сериализацию: объект преобразуется в строку (JSON.stringify), отправляется по сети, затем на принимающей стороне парсится обратно в структуру данных (JSON.parse). Формат поддерживает строки, числа, булевы значения, null, массивы и объекты.

Подробное объяснение

JSON (JavaScript Object Notation) - это легковесный формат, который стал де-факто стандартом для API и конфигурационных файлов. Его ключевые свойства:

• Текстовый и человекочитаемый - легко отлаживать и логировать.
• Строгая структура - только двойные кавычки для ключей и строк, без trailing commas, без комментариев.
• Типы данных - ограничены: string, number, boolean, null, array, object. Нет undefined, NaN, Infinity, Date, Map, Set, BigInt.
• Не зависит от языка - парсеры есть для всех популярных платформ.

Механизм передачи:

1. Сериализация - на клиенте объект превращается в строку через JSON.stringify(value, replacer?, space?). При этом:
   • функции, символы, undefined в объектах пропускаются;
   • Date превращается в ISO-строку;
   • циклические ссылки вызывают ошибку;
   • числа NaN/Infinity становятся null.
2. Транспорт - строка отправляется через HTTP (тело запроса/ответа), WebSocket, или сохраняется в storage. Обычно с заголовком Content-Type: application/json.
3. Десериализация - на сервере или другом клиенте строка разбирается через JSON.parse(text, reviver?). Результат - обычные объекты и массивы.

Важные нюансы для senior-уровня:

• Производительность - парсинг больших JSON может блокировать main thread. Для стриминга используют JSON.parse по частям или специализированные библиотеки (например, stream-json).
• Безопасность - JSON.parse не выполняет код, но данные могут быть использованы для prototype pollution, если не проверять ключи (__proto__, constructor.prototype).
• Разница с JavaScript-объектами - ключи в JSON всегда строки, числа не должны иметь ведущих нулей, нет undefined.
• Альтернативы - для бинарных данных используют MessagePack, Protocol Buffers, CBOR; для конфигов - YAML/TOML. JSON остаётся лучшим выбором для простоты и совместимости.

На практике

В frontend-разработке JSON используется повсеместно:

• fetch/axios - автоматически сериализуют тело запроса, если передать объект, и парсят ответ через .json().
• localStorage/sessionStorage - хранят только строки, поэтому объекты сериализуются в JSON.
• WebSocket - сообщения передаются как строки, часто в JSON-формате.
• SSR/Next.js - данные передаются с сервера на клиент через __NEXT_DATA__ или serialize/deserialize.
• Конфигурация - package.json, tsconfig.json, .eslintrc.json.

Практические рекомендации:

• Для передачи дат используйте ISO-строки и конвертируйте обратно в Date при парсинге через reviver.
• Для больших payload применяйте сжатие (gzip/brotli) - JSON хорошо сжимается.
• Для стриминга больших массивов используйте NDJSON (newline-delimited JSON) - каждая строка - отдельный JSON-объект.
• При работе с формами и API всегда валидируйте приходящие данные, не доверяйте структуре на 100%.

Пример кода

JAVASCRIPT
// Сериализация
const user = {
  id: 42,
  name: 'Анна',
  roles: ['admin', 'editor'],
  lastLogin: new Date('2024-01-15T10:00:00Z'),
  meta: undefined, // будет пропущено
  active: true,
};

const jsonString = JSON.stringify(user, null, 2);
console.log(jsonString);
// {
//   "id": 42,
//   "name": "Анна",
//   "roles": ["admin", "editor"],
//   "lastLogin": "2024-01-15T10:00:00.000Z",
//   "active": true
// }

// Десериализация с reviver
const parsed = JSON.parse(jsonString, (key, value) => {
  if (key === 'lastLogin') return new Date(value);
  return value;
});

console.log(parsed.lastLogin instanceof Date); // true

// Отправка через fetch
const response = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Иван' }),
});
const result = await response.json();

// Защита от prototype pollution
const safeParse = (text) => {
  const data = JSON.parse(text);
  if (data && typeof data === 'object') {
    delete data.__proto__;
    delete data.constructor?.prototype;
  }
  return data;
};

Как отвечать на собеседовании

Начните с определения и назначения, затем переходите к механике: сериализация → транспорт → десериализация. Обязательно упомяните ограничения типов и отличие от JS-объектов. Если спросят про производительность - скажите про блокировку потока и стриминг. Про безопасность - про prototype pollution и валидацию.

Хороший ответ senior-уровня включает:

• сравнение с альтернативами (XML, YAML, MessagePack);
• понимание, когда JSON не подходит (бинарные данные, большие объёмы, стриминг);
• знание тонкостей JSON.stringify (replacer, space, toJSON метод);
• умение объяснить, как работает JSON.parse с reviver.

Завершите практическим примером: как бы вы передали сложный объект с датами и вложенными структурами, и какие подводные камни учли.

Что проверяет интервьюер

• Понимание формата, а не заучивание методов.
• Умение объяснить разницу между JSON и JavaScript-объектом.
• Знание edge cases: undefined, NaN, циклические ссылки, BigInt.
• Осознание проблем безопасности и производительности.
• Способность выбрать правильный инструмент для задачи (JSON vs бинарные форматы).

Типичные ошибки

• Утверждение, что JSON - это "объект JavaScript" (на самом деле - текст).
• Забывают, что ключи должны быть в двойных кавычках.
• Не знают, что JSON.stringify пропускает функции и undefined.
• Пытаются передать Date как есть - получают строку, а не объект.
• Игнорируют обработку ошибок парсинга (try/catch вокруг JSON.parse).
• Не учитывают, что JSON.parse может вернуть null, число или строку, а не только объект.
• Используют JSON для бинарных данных без base64 - это увеличивает размер на ~33%.
• Не проверяют входящие данные на prototype pollution при работе с ненадёжными источниками.