Как работает JSON и почему без него не живет ни один frontend

Когда начинаешь разбираться во frontend или backend-разработке, JSON встречается буквально везде. Сначала это выглядит как просто какой-то формат с фигурными скобками, но со временем становится понятно — без него вообще ничего не работает.

Я сам сначала воспринимал JSON как «просто способ записать данные», но когда начал работать с API и ловить ошибки, стало ясно: если не понимать, как он устроен — будут постоянные проблемы.

В этой статье разберёмся:

JSON — это текстовый формат, в котором хранятся и передаются данные.

Ключевой момент, который многие пропускают:👉 JSON — это строка, а не объект.

Пример:

{ "name": "Artem", "age": 22, "isStudent": true, "skills": ["Python", "JavaScript"] }

Выглядит как объект JavaScript, но на деле это просто текст, который потом превращается в объект.

Представим обычную ситуацию: frontend делает запрос на сервер.

fetch('/api/user')

Сервер не может отправить «живой объект» — он отправляет строку. И вот здесь появляется JSON.

Сервер возвращает что-то вроде:

{ "id": 1, "name": "Artem" }

А уже на клиенте это превращается в объект:

fetch('/api/user') .then(res => res.json()) .then(data => { console.log(data.name); });

Вот этот момент .json() — ключевой.Он берёт строку и превращает её в нормальный объект, с которым можно работать.

Парсинг — это преобразование JSON-строки в объект.

Простой пример:

const jsonString = '{"name": "Artem"}'; const obj = JSON.parse(jsonString); console.log(obj.name); // Artem

Обратная операция:

const obj = { name: "Artem" }; const jsonString = JSON.stringify(obj); console.log(jsonString); // {"name":"Artem"}

Если упростить:

Когда вызывается JSON.parse(), происходит несколько шагов:

Если где-то ошибка — код просто упадёт.

Например:

JSON.parse('{ name: "Artem" }');

👉 Будет ошибка, потому что ключ без кавычек.

JSON довольно простой. В нём есть:

Пример:

{ "name": "Artem", "age": 22, "active": true, "skills": ["JS", "Python"], "profile": { "city": "SPB" } }

Вот тут часто начинаются проблемы.

JSON не поддерживает:

Пример с датой:

const obj = { date: new Date() }; console.log(JSON.stringify(obj));

На выходе будет строка:

{"date":"2026-04-01T10:00:00.000Z"}

То есть дата превращается в обычную строку.

Вот с чем я сам чаще всего сталкивался:

{ name: "Artem" }

Так не работает. Нужно:

{ "name": "Artem" }

{ "name": "Artem", }

Кажется мелочью, но JSON это не прощает.

JSON.parse("Hello");

👉 сразу ошибка

const data = JSON.parse(response.json());

response.json() уже возвращает объект — парсить ещё раз не нужно.

Любое современное приложение постоянно обменивается данными:

И всё это происходит через JSON.

Почему именно он:

По сути, это «общий язык» между frontend и backend.

JSON используется почти везде:

Если открыть любой современный проект — он там точно будет.

const userJson = '{"name":"Artem","age":22}'; const user = JSON.parse(userJson); if (user.age > 18) { console.log("Доступ есть"); }

Простой пример, но он показывает суть:мы получили строку → превратили в объект → начали использовать.

JSON кажется простой вещью, но на практике от него зависит очень многое.

Если не понимать:

— можно тратить кучу времени на поиск ошибок.

На старте JSON выглядит как мелочь. Но чем дальше заходишь в разработку, тем больше понимаешь — это одна из базовых вещей, без которой никуда.

Если его нормально освоить:

И в целом начинаешь лучше понимать, как устроены веб-приложения.