Json Deep Dive
JSON (JavaScript Object Notation) is a lightweight, text-based data format for storing and exchanging structured data, which you turn into JavaScript values with JSON.parse() and back into text with JSON.stringify() .
Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.
Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience: Download Node.js to run JavaScript on your computer, use your browser's Developer Console (Press F12) to test code snippets, or create a .html file with <script> tags and open it in your browser.
Master JSON handling: serialization, parsing, type preservation, circular references, validation, and production patterns.
What You'll Learn
📦 Real-World Analogy: Universal Shipping Label
JSON (JavaScript Object Notation) is a text-based data format , not JavaScript itself. It has strict rules and can only represent: objects, arrays, strings, numbers, booleans, and null.
Serialization converts JavaScript values into JSON text. Understanding how different types are handled is crucial to avoiding data loss.
Parsing converts JSON text back to JavaScript values. JSON syntax is extremely strict — errors that JavaScript allows will crash JSON.parse.
The replacer parameter in JSON.stringify lets you filter keys, transform values, mask sensitive data, and preserve type information.
The reviver parameter in JSON.parse lets you restore Dates, class instances, and other types that JSON destroys during serialization.
Circular references (objects referencing themselves) crash JSON.stringify . You need a custom serializer to handle them safely.
When you serialize class instances, all methods are lost. Here's how to preserve and restore class types through JSON.
Never trust incoming JSON blindly. Always validate the structure, types, and required fields before using data in your application.
Professional applications use pipelines to process JSON: safe parse → validate → transform → normalize. This pattern keeps data handling consistent and safe.
As your data schema evolves, you need a migration strategy to upgrade old JSON to new formats without breaking existing data.
Storing JSON in localStorage requires error handling, expiration support, and protection against corrupted data.
The JSON.parse(JSON.stringify(obj)) pattern creates deep clones, but has significant limitations. Know when to use it and when to use structuredClone .
Practice quiz
Which method converts a JavaScript value into a JSON string?
- JSON.parse()
- JSON.encode()
- JSON.stringify()
- JSON.toString()
Answer: JSON.stringify(). JSON.stringify() serializes a value to JSON text; JSON.parse() does the reverse.
What does JSON.parse() return?
- A JavaScript value
- A JSON string
- Always an object
- A Promise
Answer: A JavaScript value. JSON.parse() deserializes JSON text back into a JavaScript value.
What happens to a property whose value is undefined during JSON.stringify()?
- It becomes null
- It becomes the string 'undefined'
- It throws an error
- It is removed entirely
Answer: It is removed entirely. undefined (and functions) are dropped entirely from objects during serialization.
What do NaN and Infinity become when serialized with JSON.stringify()?
- 0
- null
- Strings
- They throw
Answer: null. NaN and Infinity cannot be represented in JSON, so they become null.
What happens to a Date when passed to JSON.stringify()?
- It becomes an ISO string
- It is removed
- It stays a Date object
- It becomes a number
Answer: It becomes an ISO string. A Date is converted to an ISO 8601 string; round-tripping does not restore it to a Date automatically.
What does JSON.stringify(obj) return when obj contains a circular reference?
- null
- An empty object
- It throws a TypeError
Answer: It throws a TypeError. Circular references crash JSON.stringify with a TypeError unless you use a custom replacer.
Which JSON.parse input is valid?
- {name: 'value'}
- {"name": "value"}
- {"a": 1, "b": 2,}
- {'name': 'value'}
Answer: {"name": "value"}. JSON requires double-quoted keys and strings, and forbids trailing commas.
What is the typeof JSON.stringify({ a: 1 })?
- object
- number
- json
- string
Answer: string. stringify always produces a string.
What does a replacer ARRAY argument to JSON.stringify do?
- Renames keys
- Includes only the listed keys in the output
- Sorts the keys
- Removes all values
Answer: Includes only the listed keys in the output. Passing an array of key names whitelists which properties appear in the output.
After const c = JSON.parse(JSON.stringify({ date: new Date() })), what is typeof c.date?
- object
- number
- string
- undefined
Answer: string. JSON cloning turns the Date into an ISO string, so the clone's date is a string — a key limitation versus structuredClone.