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

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

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

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

Контент

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

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

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

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

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

Ці дві функції - **одні з найчастіше використовуваних у JavaScript**.
Вони потрібні для **перетворення даних у формат JSON і назад**.

---

## Що таке JSON

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

Приклад JSON-рядка:

```javascript
{
  "name": "Oleh",
  "age": 25,
  "isAdmin": false
}
```

---

## 1. `JSON.stringify()` - об'єкт → рядок

> Перетворює об'єкт JavaScript у рядок формату JSON.

### Приклад:

```javascript
const user = {
  name: 'Oleh',
  age: 25,
  isAdmin: false
};

const json = JSON.stringify(user);

console.log(json);
// '{"name":"Oleh","age":25,"isAdmin":false}'
console.log(typeof json); // "string"
```

> Тепер `json` - це звичайний рядок, який можна надіслати мережею або зберегти у файл.

---

### Що робить `JSON.stringify()`:

- перетворює об'єкт або масив у рядок;
- **ігнорує** функції, `undefined` і символи (`Symbol`);
- рекурсивно обходить вкладені об'єкти.

---

### Приклад з функціями

```javascript
const data = {
  name: 'JS',
  greet() { console.log('Hi'); },
  test: undefined
};

console.log(JSON.stringify(data));
// '{"name":"JS"}' - функції та undefined не потрапляють у JSON
```

---

### Можна красиво відформатувати (з відступами)

```javascript
const json = JSON.stringify(user, null, 2);
console.log(json);
/*
{
  "name": "Oleh",
  "age": 25,
  "isAdmin": false
}
*/
```

> Другий аргумент - `replacer`, третій - кількість пробілів для форматування.

---

## 2. `JSON.parse()` - рядок → об'єкт

> Перетворює JSON-рядок назад у об'єкт JavaScript.

### Приклад:

```javascript
const json = '{"name":"Oleh","age":25,"isAdmin":false}';

const user = JSON.parse(json);

console.log(user.name); // "Oleh"
console.log(user.age);  // 25
console.log(typeof user); // "object"
```

---

### Помилка при некоректному JSON

Якщо рядок некоректний, буде помилка:

```javascript
JSON.parse("{name:'Oleh'}"); // Помилка: Unexpected token n
```

Правильний варіант:

```javascript
JSON.parse('{"name":"Oleh"}');
```

> У JSON ключі та рядки **завжди повинні бути в подвійних лапках** `" "`.

---

## Приклад «у зв'язці»

Часто їх використовують разом, для копіювання або збереження даних:

```javascript
const user = { name: 'Oleh', skills: ['JS', 'React'] };

const json = JSON.stringify(user);
localStorage.setItem('user', json); // зберегли рядок

const fromStorage = JSON.parse(localStorage.getItem('user'));
console.log(fromStorage.skills); // ['JS', 'React']
```

---

## Приклад глибокого копіювання об'єкта

```javascript
const obj = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(obj));

copy.b.c = 999;

console.log(obj.b.c); // 2 (оригінал не змінився)
```

> Цей прийом часто використовують, щоб зробити **глибоку копію** без посилань.

---

## Підсумок

| Метод | Напрямок | Що робить | Результат |
|---|---|---|---|
| `JSON.stringify()` | об'єкт → рядок | перетворює об'єкт JS у JSON-текст | `'{"name":"Oleh"}'` |
| `JSON.parse()` | рядок → об'єкт | перетворює JSON-текст у об'єкт JS | `{ name: "Oleh" }` |

---

## Коротко

```javascript
const user = { name: 'Oleh' };

const json = JSON.stringify(user); // '{"name":"Oleh"}'
const obj  = JSON.parse(json);     // { name: 'Oleh' }
```

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

Для рев’юера

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

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