Working with JSON

JavaScriptJunior~1 min read

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' }

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.