Working with JSON
Learn what JSON is and why it exists, then master JSON.stringify() and JSON.parse() for converting between JavaScript values and JSON text, along with the gotchas that trip people up.
Reading Time
12 min
Lesson
Lesson 45 of 48
What is JSON?
JSON (JavaScript Object Notation) is a lightweight, text-based data interchange format. It was born out of JavaScript's object literal syntax, which is why it looks so familiar, but JSON itself is language-independent — nearly every programming language has a library for reading and writing it. It's the format you'll see constantly when working with APIs: a server sends back JSON text, and your JavaScript code turns that text into a usable object.
JSON is Not JavaScript
It's easy to assume JSON is just a JavaScript object literal, but JSON is actually a stricter subset of that syntax. Object keys must be wrapped in double quotes (not single quotes, and never left bare). Values can only be strings, numbers, booleans, null, arrays, or other JSON objects — functions, undefined, and comments are simply not allowed. Trailing commas, which JavaScript tolerates in some places, are also invalid in JSON. Treat JSON as its own format with its own rules, not as interchangeable with JS object syntax.
Valid vs. Invalid JSON
Console Output
Click “Run” to see the console output here.
JSON.stringify()
JSON.stringify() converts a JavaScript value into a JSON-formatted string. This is what you use before sending data to a server, saving it to localStorage, or logging a readable snapshot of an object. It accepts up to three arguments: the value to convert, an optional replacer, and an optional space value for indentation.
JSON.stringify() Basics
Console Output
Click “Run” to see the console output here.
The Replacer Argument
The second argument to JSON.stringify() is a "replacer," which lets you control what gets included in the output. Pass an array of key names to include only those properties, or pass a function that receives each key/value pair and returns the value to use (or undefined to omit that key entirely).
Replacer Examples
Console Output
Click “Run” to see the console output here.
JSON.parse()
JSON.parse() does the reverse of stringify — it takes a JSON-formatted string and converts it into a real JavaScript value (an object, array, or primitive). This is what you use after receiving a JSON response from a server (via response.json() in the Fetch API) or reading a JSON string back out of storage.
JSON.parse() with a Reviver
Console Output
Click “Run” to see the console output here.
Common Gotchas
- Dates are converted to ISO string form during stringify, and stay strings after parse — you must revive them manually if you need real Date objects back.
- Properties with a value of undefined are dropped entirely by JSON.stringify(); they never appear in the output at all.
- Functions are also dropped silently — JSON has no way to represent executable code.
- Circular references (an object that refers back to itself) cause JSON.stringify() to throw a TypeError, since it cannot represent an infinite structure.
- NaN and Infinity are converted to null, since JSON has no concept of either.
Gotchas in Action
Console Output
Click “Run” to see the console output here.
JSON.stringify() vs. JSON.parse()
| Method | Direction | Typical Use |
|---|---|---|
| JSON.stringify() | JS value → JSON string | Sending data to a server, saving to storage |
| JSON.parse() | JSON string → JS value | Reading a server response, loading saved data |
Pretty-Printing for Debugging
Passing 2 (or 4) as the third argument to JSON.stringify() is a quick way to log a readable, indented snapshot of a complex object — much easier to scan than console.log()'s default single-line output for deeply nested data.
Watch Out for Invalid JSON at Parse Time
JSON.parse() throws a SyntaxError on malformed input, including trailing commas, single-quoted strings, or unquoted keys. If you're parsing data from an untrusted or unpredictable source, wrap the call in a try/catch so a bad response doesn't crash your app.