Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке JSON?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**JSON** - одне з найважливіших понять у фронтенді та веброзробці загалом.
Якщо сказати просто:

> **JSON (JavaScript Object Notation)** - це **текстовий формат для зберігання та обміну даними**,
> зрозумілий як людям, так і комп'ютерам.

---

## Приклад JSON

```javascript
{
  "name": "Oleh",
  "age": 25,
  "isAdmin": false,
  "skills": ["JavaScript", "React", "Node.js"],
  "address": {
    "city": "Kyiv",
    "zip": 123456
  }
}
```

> Це звичайний JSON-документ.
> По суті, це **рядок**, у якому зберігаються структуровані дані.
> Такі дані легко читати і передавати мережею.

---

## Де використовується JSON

1. **Обмін даними між клієнтом і сервером**
Сервер надсилає JSON, браузер його читає:

```javascript
  fetch('/api/user')
    .then(res => res.json())
    .then(data => console.log(data.name));
  ```
2. **Зберігання даних у localStorage**

```javascript
  const user = { name: 'Oleh', age: 25 };
  localStorage.setItem('user', JSON.stringify(user));
  ```
3. **Налаштування і конфігурації**
(наприклад, `package.json` у Node.js-проєктах):

```javascript
  {
    "name": "my-project",
    "version": "1.0.0",
    "scripts": {
      "start": "node index.js"
    }
  }
  ```

---

## Правила синтаксису JSON

| Правило | Опис |
|---|---|
| Ключі - **завжди в подвійних лапках** | `"name": "Oleh"` |
| Рядки - теж **у подвійних лапках** | `"city": "Kyiv"` |
| Підтримуються лише прості типи | `string`, `number`, `boolean`, `null`, `object`, `array` |
| Немає функцій | `function() {}` → помилка |
| Немає `undefined` і `Symbol` | вони ігноруються |
| Кома між елементами | але **не** після останнього елемента |

---

## Основні типи даних JSON

| Тип | Приклад |
|---|---|
| **string** | `"Oleh"` |
| **number** | `25` |
| **boolean** | `true`, `false` |
| **null** | `null` |
| **object** | `{ "a": 1, "b": 2 }` |
| **array** | `[1, 2, 3]` |

---

## Відмінність JSON від об'єктів JavaScript

| Особливість | JSON | Об'єкт JavaScript |
|---|---|---|
| Ключі | Лише в `"подвійних лапках"` | Можна без лапок |
| Рядки | Лише `"подвійні"` | `'одинарні'` або `"подвійні"` |
| Типи | Лише прості (`string`, `number` тощо) | Будь-які (`function`, `undefined`, `symbol`) |
| Призначення | Зберігання/обмін даними | Робота в коді JS |

---

## Перетворення між об'єктом і JSON

```javascript
const obj = { name: 'Oleh', age: 25 };

// об'єкт → JSON
const json = JSON.stringify(obj);
console.log(json);
// '{"name":"Oleh","age":25}'

// JSON → об'єкт
const parsed = JSON.parse(json);
console.log(parsed.name); // 'Oleh'
```

---

## Підсумок

| Параметр | JSON |
|---|---|
| Повна назва | JavaScript Object Notation |
| Формат | Текстовий |
| Використовується для | Зберігання та обміну даними |
| Типові операції | `JSON.stringify()` і `JSON.parse()` |
| Заснований на | Синтаксисі JavaScript |
| Підтримується | В усіх мовах (Python, Java, C#, Go тощо) |

---

## Коротко

> **JSON** - це *універсальний формат даних*,
> який дозволяє передавати складні структури (об'єкти, масиви тощо)
> у вигляді простого текстового рядка.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати460 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.