Suggest an edit

Improve this article

Refine the answer for “Working with JSON”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

These two functions are **among the most frequently used in JavaScript**.
They are needed to **convert data to JSON format and back**.

---

## What JSON is

**JSON (JavaScript Object Notation)** is a **text format** for exchanging data,
similar to JavaScript objects, but intended **for storing and transmitting data** (for example, between a server and a client).

Example of a JSON string:

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

---

## 1. `JSON.stringify()` - object to string

> Converts a JavaScript object into a JSON-formatted string.

### Example:

```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"
```

> Now `json` is a plain string that can be sent over the network or saved to a file.

---

### What `JSON.stringify()` does:

- turns an object or array into a string;
- **ignores** functions, `undefined` and symbols (`Symbol`);
- recursively walks nested objects.

---

### Example with functions

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

console.log(JSON.stringify(data));
// '{"name":"JS"}' - functions and undefined are not included in JSON
```

---

### It can be nicely formatted (with indentation)

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

> The second argument is the `replacer`, the third is the number of spaces used for formatting.

---

## 2. `JSON.parse()` - string to object

> Converts a JSON string back into a JavaScript object.

### Example:

```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"
```

---

### Error on invalid JSON

If the string is invalid, there will be an error:

```javascript
JSON.parse("{name:'Oleh'}"); // Error: Unexpected token n
```

The correct version:

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

> In JSON, keys and strings **must always be in double quotes** `" "`.

---

## Example "in combination"

They are often used together, to copy or save data:

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

const json = JSON.stringify(user);
localStorage.setItem('user', json); // saved the string

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

---

## Example of deep-copying an object

```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 (the original did not change)
```

> This trick is often used to make a **deep copy** without references.

---

## Summary

| Method | Direction | What it does | Result |
|---|---|---|---|
| `JSON.stringify()` | object to string | turns a JS object into JSON text | `'{"name":"Oleh"}'` |
| `JSON.parse()` | string to object | turns JSON text into a JS object | `{ name: "Oleh" }` |

---

## In short

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

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

Markdown · drag & drop images · ⌘B / ⌘I shortcuts495 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.