How Do JSON.parse and JSON.stringify Work?
Learn how JSON.parse and JSON.stringify work in JavaScript to serialize and deserialize data, their arguments, dropped values and common interview questions.
Expected Interview Answer
JSON.stringify converts a JavaScript value into a JSON string for storage or transmission, and JSON.parse does the reverse, turning a JSON string back into a JavaScript value.
JSON.stringify serializes objects, arrays, strings, numbers, booleans and null, skipping functions, undefined and symbols, and it accepts an optional replacer and a spacing argument for pretty-printing. JSON.parse deserializes a valid JSON string into live objects and can take a reviver function to transform values as they are parsed. Together they underpin API payloads, localStorage persistence, and a quick (but limited) deep-copy trick.
- Serialize data for APIs and network transfer
- Persist objects in localStorage or files
- Pretty-print with the spacing argument
- Transform values via replacer and reviver
- Enable a quick JSON-safe deep copy
AI Mentor Explanation
JSON.stringify is like writing a live match into a compact scorecard string everyone can read and share, while JSON.parse is the analyst reading that scorecard back into a full mental model of the game. Some things, like the crowd's noise, simply don't fit on the card and are dropped, just as functions never survive stringify.
Step-by-Step Explanation
Step 1
Start with a value
Begin with a JavaScript object, array or primitive you want to store or send.
Step 2
Serialize with stringify
Call JSON.stringify(value) to produce a JSON string; add a spacing argument for readable output.
Step 3
Transmit or store
Send the string over the network or save it in localStorage — strings travel and persist easily.
Step 4
Deserialize with parse
Call JSON.parse(str) to turn the string back into a live JavaScript value.
Step 5
Optionally transform
Use a replacer in stringify or a reviver in parse to customize how values are converted.
What Interviewer Expects
- stringify serializes, parse deserializes
- Awareness that functions and undefined are dropped
- Knowing the replacer/spacing and reviver arguments
- A real use case (API, localStorage, deep copy)
- Knowing parse throws on invalid JSON
Common Mistakes
- Thinking JSON.stringify keeps functions and undefined
- Forgetting JSON.parse throws on malformed input
- Assuming Dates round-trip (they become strings)
- Using it to deep-copy data with cycles (it throws)
Best Answer (HR Friendly)
“JSON.stringify turns a JavaScript object into a text string that can be saved or sent over the internet, and JSON.parse turns that text string back into a usable object. It is how apps store data and talk to servers, though a few things like functions get left out along the way.”
Code Example
const user = { name: 'Lin', roles: ['admin'], active: true };
const json = JSON.stringify(user);
// '{"name":"Lin","roles":["admin"],"active":true}'
const back = JSON.parse(json);
console.log(back.roles[0]); // 'admin'const data = { id: 1, greet: () => 'hi', note: undefined };
console.log(JSON.stringify(data, null, 2));
// {
// "id": 1
// } — the function and undefined are omittedFollow-up Questions
- Why are functions and undefined omitted by JSON.stringify?
- What is the replacer argument used for?
- How does the reviver function in JSON.parse work?
- Why is JSON.parse(JSON.stringify(obj)) a limited deep-copy method?
- What happens when you stringify an object with a circular reference?
MCQ Practice
1. What does JSON.stringify do to a function-valued property?
JSON.stringify skips properties whose values are functions, undefined, or symbols in an object.
2. What is the third argument to JSON.stringify used for?
The third argument controls indentation — a number of spaces or a string — to produce readable, pretty-printed JSON.
3. What happens if you call JSON.parse on an invalid JSON string?
JSON.parse throws a SyntaxError when given a string that is not valid JSON.
Flash Cards
What does JSON.stringify do? — Serializes a JavaScript value into a JSON string, dropping functions, undefined and symbols.
What does JSON.parse do? — Deserializes a JSON string back into a live JavaScript value; throws on invalid JSON.
stringify third argument? — The spacing/indentation value used to pretty-print the JSON output.
The reviver function? — An optional JSON.parse callback that transforms each value as it is parsed.