JSON.strigify() vs JSON.parse()

🧠 JSON.stringify vs JSON.parse — Deep Dive

In JavaScript, these two APIs convert between JavaScript values and JSON text:

JSON.stringify(value) → JS value ➜ JSON string
JSON.parse(text) → JSON string ➜ JS value

Think:

stringify = serialize (object → text)
parse = deserialize (text → object)

⚙️ 1) JSON.stringify — How it works internally
🎯 Basic

const obj = { name: "Ashish", age: 25 };
const str = JSON.stringify(obj);
// '{"name":"Ashish","age":25}'

🔬 Internal Steps (conceptual)

Input JS value
  ↓
Walk the structure (recursive)
  ↓
Convert primitives to JSON tokens
  ↓
Build a valid JSON string

Objects → { "key": value }
Arrays → [ ... ]
Strings → quoted with escaping
Numbers/booleans → as-is

🧩 Examples (important cases)
✅ Nested objects

JSON.stringify({ a: 1, b: { c: 2 } });
// '{"a":1,"b":{"c":2}}'

⚠️ undefined, functions, symbols

JSON.stringify({
  a: undefined,
  b: function () {},
  c: Symbol("x"),
  d: 1
});
// '{"d":1}'

👉 These are omitted in objects

⚠️ In arrays

JSON.stringify([1, undefined, function(){}, 3]);
// '[1,null,null,3]'

👉 They become null in arrays

⚠️ Dates

JSON.stringify({ d: new Date("2024-01-01") });
// '{"d":"2024-01-01T00:00:00.000Z"}'

👉 Uses toJSON() → ISO string

❌ Circular references

const a = {};
a.self = a;

JSON.stringify(a); // ❌ TypeError

🔧 Advanced: replacer & space
Replacer (filter/transform)

JSON.stringify({ a: 1, b: 2 }, ["a"]);
// '{"a":1}'

or function:

JSON.stringify({ a: 1, b: 2 }, (key, value) =>
  key === "b" ? undefined : value
);
// '{"a":1}'

Pretty print

JSON.stringify(obj, null, 2);

⚙️ 2) JSON.parse — How it works internally
🎯 Basic

const str = '{"name":"Ashish","age":25}';
const obj = JSON.parse(str);
// { name: "Ashish", age: 25 }

🔬 Internal Steps

Input JSON string
  ↓
Lexer + Parser (strict JSON grammar)
  ↓
Build JS objects/arrays/primitives

👉 JSON must be valid:

Double quotes required
No trailing commas
🧩 Examples
✅ Array

JSON.parse('[1, 2, 3]');
// [1, 2, 3]

❌ Invalid JSON

JSON.parse("{ name: 'Ashish' }"); // ❌ Error

👉 Must be:

JSON.parse('{ "name": "Ashish" }');

🔧 Advanced: reviver

Transform values during parsing:

const obj = JSON.parse('{"date":"2024-01-01"}', (key, value) => {
  if (key === "date") return new Date(value);
  return value;
});

👉 Convert string → Date object

🔁 Round Trip Example
const original = { x: 1, y: [2, 3] };

const str = JSON.stringify(original);
const copy = JSON.parse(str);

console.log(copy); // deep copy-like
⚠️ Important Limitations
❌ Loses functions

JSON.stringify({ fn: () => {} });
// '{}'

❌ Loses undefined

JSON.stringify({ a: undefined });
// '{}'

❌ Loses class/prototype

class User {
  constructor(name) {
    this.name = name;
  }
}

const u = new User("A");
const copy = JSON.parse(JSON.stringify(u));

copy instanceof User; // false ❌

⚖️ stringify vs parse
Feature stringify parse
Direction JS → JSON string JSON string → JS
Output string object/array
Errors circular refs invalid JSON
Customization replacer reviver
🧠 Real-World Use Cases
📦 API communication

fetch("/api", {
  method: "POST",
  body: JSON.stringify(data)
});

💾 Local storage

localStorage.setItem("user", JSON.stringify(user));
const user = JSON.parse(localStorage.getItem("user"));

🔁 Deep clone (limited)

const clone = JSON.parse(JSON.stringify(obj));

👉 Works only for simple data

🧭 Mental Model

stringify → “convert JS to transportable text”
parse → “rebuild JS from text”

🎯 Final Takeaways
JSON.stringify serializes JS → JSON string
JSON.parse deserializes JSON → JS object
They are inverse operations
But not perfect (data loss for functions, prototypes, etc.)