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() .
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
- JSON stringify & parse
- Custom replacers & revivers
- Handling circular references
- Class serialization with type markers
- Schema validation
- JSON versioning & migrations
📦 Real-World Analogy: Universal Shipping Label
Type
JSON Example
Notes
String
"hello"
Must use double quotes
Number
42, 3.14
No NaN or Infinity
Boolean
true, false
Lowercase only
Null
null
undefined becomes null
Array
[1, 2, 3]
Ordered list
Object
Keys must be strings
What JSON Actually Is (And What It Cannot Represent)
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.
- undefined - gets removed entirely
- Functions - removed entirely
- Dates - converted to ISO strings
- NaN / Infinity - become null
- RegExp, Map, Set - become empty objects
- Circular references - throws error
JSON.stringify — Serialization
Serialization converts JavaScript values into JSON text. Understanding how different types are handled is crucial to avoiding data loss.
JSON.parse — Deserialization
Parsing converts JSON text back to JavaScript values. JSON syntax is extremely strict — errors that JavaScript allows will crash JSON.parse.
Custom Serialization with Replacers
The replacer parameter in JSON.stringify lets you filter keys, transform values, mask sensitive data, and preserve type information.
Custom Parsing with Revivers
The reviver parameter in JSON.parse lets you restore Dates, class instances, and other types that JSON destroys during serialization.
Handling Circular References
Circular references (objects referencing themselves) crash JSON.stringify . You need a custom serializer to handle them safely.
Serializing Class Instances
When you serialize class instances, all methods are lost. Here's how to preserve and restore class types through JSON.
JSON Schema Validation
Never trust incoming JSON blindly. Always validate the structure, types, and required fields before using data in your application.
JSON Transform Pipeline
Professional applications use pipelines to process JSON: safe parse → validate → transform → normalize. This pattern keeps data handling consistent and safe.
JSON Versioning & Migrations
As your data schema evolves, you need a migration strategy to upgrade old JSON to new formats without breaking existing data.
Safe JSON Storage (localStorage)
Storing JSON in localStorage requires error handling, expiration support, and protection against corrupted data.
Deep Cloning with JSON
The JSON.parse(JSON.stringify(obj)) pattern creates deep clones, but has significant limitations. Know when to use it and when to use structuredClone .
JSON Best Practices
✅ DO
- Always wrap parse in try/catch
- Validate JSON structure before use
- Use replacers to preserve type info
- Use revivers to restore types
- Handle circular references safely
- Version your JSON schemas
- Use UTF-8 encoding
- Create transform pipelines
❌ DON'T
- Use eval() to parse JSON
- Assume API data is valid
- Store Dates without restoration plan
- Ignore type loss (undefined, functions)
- Mutate parsed JSON directly
- Use JSON for binary data
- Skip schema validation
- Ignore circular reference errors
🎯 Mastery Summary
- JSON is a strict text format — not all JS types survive serialization
- JSON.stringify converts to text; JSON.parse converts back
- Use replacers to filter/transform during serialization
- Use revivers to restore types during parsing
- Handle circular references with WeakSet tracking
- Preserve class instances with type markers
- Always validate incoming JSON before using it
- Build transform pipelines for consistent processing
- Version your schemas and create migrations
- Use structuredClone instead of JSON for complex deep cloning
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.
Continue this course
- Previous: Code Architecture
- Next: Final Project