Module 40 // Core JavaScript

JSON

Module Objective

Serialization, parsing, replacers, revivers

Mental Model Realtime Simulation

INTERACTIVE_CANVAS
Editor_Pane
Loading...
Console_Output
Waiting for output...

Practical Code Examples

// Example 1
// 1. Basic Parse & Stringify
const user = { id: 1, name: "Subhajit" };

const jsonString = JSON.stringify(user);
console.log(typeof jsonString); // "string"

const backToObj = JSON.parse(jsonString);
console.log(backToObj.name); // "Subhajit"
💡 `JSON.stringify` converts a JS object into a string for transport (like an API call). `JSON.parse` converts it back into a usable object.
// Example 2
// 2. The Replacer & Reviver
const data = { date: new Date(), secret: "password" };

const filtered = JSON.stringify(data, (key, value) => {
  return key === "secret" ? undefined : value;
});

console.log(filtered); // "{\"date\":\"2025-12-17T...\"}"
💡 You can pass a function to `stringify` to filter out properties (like passwords) or format data during serialization.
// Example 3
// 3. Deep Cloning Hack
const original = { a: 1, b: { c: 2 } };
const clone = JSON.parse(JSON.stringify(original));

clone.b.c = 99;
console.log(original.b.c); // 2 (Original is safe!)
💡 While modern JS has `structuredClone()`, stringifying and parsing is a classic hack to deep-copy an object without maintaining references.

Engine & Memory Architecture

Parsing & Allocation

1. String to Object:

  • When JSON.parse() runs, the engine scans the string and builds a corresponding Object Tree in the Heap.
  • This can be memory-intensive for large files.

2. Serialization:

  • JSON.stringify() "walks" the object tree in memory and converts it into a UTF-16 string in the RAM.

3. Performance:

  • JSON parsing is a "blocking" operation on the main thread.
  • Rule: For extremely large JSON objects (MBs), consider streaming the data or parsing it in a Web Worker to avoid freezing the CPU and UI.
PREVIOUS_MODULEIntl APINEXT_MODULE Generators & Async Iteration