DEV Community: Ashish Ghildiyal

JSON.strigify() vs JSON.parse()

Ashish Ghildiyal — Sun, 19 Apr 2026 11:59:06 +0000

🧠 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

🧠 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.)

Natives vs Boxing Wrappers in JavaScript

Ashish Ghildiyal — Sun, 19 Apr 2026 05:58:04 +0000

In JavaScript, you work with primitive values (like strings, numbers) but still call methods on them.
That's possible because of boxing (wrapper objects).

🎯 1. What are Natives?

Natives = built-in types and functions provided by JavaScript
🔹 Primitive (Native Types)

"hello"   // string
42        // number
true      // boolean
null
undefined
Symbol()
BigInt(10)

👉 These are primitive values
👉 They are not objects

🔹 Object Natives

Object
Array
Function
Date
RegExp

👉 These are actual objects / constructors
🧩 2. The Problem

Primitives are not objects, so:

let str = "hello";

👉 This should NOT work:

str.toUpperCase(); // ❓ how?

Because:

"hello" is NOT an object

⚙️ 3. What is Boxing (Wrapper Objects)?

Boxing = temporarily converting a primitive into an object so you can use methods

🔬 Behind the Scene

let str = "hello";
str.toUpperCase();

Internally becomes:

new String("hello").toUpperCase();

👉 JS engine automatically wraps the primitive

🧠 This is called Autoboxing

🔁 Full Internal Flow

Primitive → Wrapper Object → Method Call → Discard Wrapper

🧪 Example

let num = 10;
num.toFixed(2);

Internally:

new Number(10).toFixed(2);

👉 Then wrapper is destroyed

⚙️ 4. Types of Wrapper Objects

🧩 5. Important Difference

Primitive

let a = "hello";

Wrapper Object

let b = new String("hello");

⚠️ These are NOT the same

typeof a // "string"
typeof b // "object"

⚠️ Comparison Problem

"a" === new String("a") // false ❌

👉 Because:

primitive vs object
🔬 Deep Internal Behavior
When you access a method:

"hello".length

Engine does:

1. Wrap primitive → String object
2. Access property
3. Return value
4. Destroy wrapper

🧠 Why Boxing Exists

To allow:

"hello".toUpperCase()
(10).toFixed(2)
true.toString()

👉 Without making primitives heavy objects

⚡ 6. Unboxing (Reverse Process)

When needed, object converts back to primitive:


let x = new Number(10);
x + 5 // 15

👉 Uses:

valueOf()
toString()
🧩 Example

let obj = new Number(10);
obj.valueOf(); // 10

⚠️ 7. Why You Should NOT Use Wrapper Objects
❌ Bad Practice

let str = new String("hello");

Problems:

Unexpected behavior

if (new Boolean(false)) {
  console.log("true"); // runs ❌
}

👉 Objects are always truthy

Performance overhead Object creation Memory usage
Confusing comparisons

🧠 8. Primitives vs Objects Summary

🔥 Real Example (Step-by-step)

"abc".includes("a");

Internally:

1. "abc" → new String("abc")
2. call includes()
3. return true
4. destroy wrapper

🧭 Mental Model


“JS temporarily puts primitives inside objects when needed”

🎯 Final Takeaways
Natives = built-in types (primitive + object)
Boxing = wrapping primitive into object temporarily
Happens automatically (autoboxing)
Wrapper objects (new String) should be avoided

undefined vs undeclared, and how typeof behaves

Ashish Ghildiyal — Fri, 17 Apr 2026 07:29:10 +0000

🧩 1. What is undefined?

let a;
console.log(a); // undefined

✅ Meaning
A variable is declared in memory but not assigned a value

🔬 Behind the scenes

During creation phase:

a → undefined

So:
Variable exists in memory
Value is default-initialized to undefined

❌ 2. What is undeclared?

console.log(b); // ReferenceError

❌ Meaning
Variable was never declared at all

🔬 Behind the scenes

b → ❌ not present in memory

👉 Engine cannot find it → throws ReferenceError

⚖️ Key Difference

⚙️ 3. What is typeof?

typeof is an operator that returns the type of a value as a string.

Examples

typeof 10        // "number"
typeof "hello"   // "string"
typeof true      // "boolean"
typeof undefined // "undefined"

🔥 Special Case (Important)

typeof b // "undefined"

👉 Even though b is undeclared!

❗ Why does typeof not throw error?

Normally:

b // ❌ ReferenceError

But:

typeof b // "undefined" ✅

🧠 4. Why typeof undefined and typeof undeclared are same?
Because:

typeof undeclared → "undefined"
typeof undefined  → "undefined"

👉 But internally they are NOT the same thing

🔬 Internal Reason
For declared variable:

let a;
typeof a // "undefined"

👉 Engine:

Find a → value is undefined → return "undefined"

For undeclared variable:
typeof b

👉 Engine does something special:

Check if variable exists
IF NOT → return "undefined" instead of throwing error

🛡️ 5. Safety Guard Feature of typeof

This is intentional design in JavaScript.

🎯 Purpose

Allow safe checks for variables that may not exist

✅ Example

if (typeof someVar !== "undefined") {
  console.log("exists");
}

👉 Safe even if someVar is never declared

❌ Without typeof

if (someVar !== undefined) {
  // ❌ ReferenceError
}

🔬 Internal Behavior (Spec-Level Concept)
Normally variable access:

ResolveBinding(name)

If not found:

→ ReferenceError

But typeof does:

If binding not found → return "undefined"

👉 Special handling in spec

⚡ Real-World Use Case

Feature detection

if (typeof window !== "undefined") {
  // browser environment
}

👉 Used in frameworks like Next.js

⚠️ Important Edge Case
typeof null // "object" ❌

👉 Historical bug in JavaScript

🧠 Mental Model

Think like this:

Normal access → strict (error if not found)
typeof → safe (never throws for variables)

🎯 Final Takeaways
undefined → declared but no value
undeclared → not defined at all
typeof:
returns type as string
never throws error for undeclared variables
acts as a safety guard

🔥 Interview-Level Answer

typeof is a safe operator in JavaScript that returns the type of a value and uniquely does not throw a ReferenceError when used on undeclared variables, instead returning "undefined".

Throttling in JavaScript

Ashish Ghildiyal — Thu, 16 Apr 2026 10:47:43 +0000

🧠 What is Throttling in JavaScript?

In JavaScript, throttling is a technique to:

Limit how often a function can execute within a given time interval

🎯 One-Line Difference from Debounce

Debounce → run after user stops
Throttle → run at most once every X ms

⚡ Problem Throttling Solves

Some events fire continuously:

scroll
resize
mousemove

👉 Without control:

Scroll → function fires 100+ times/sec ❌

👉 With throttling:

Scroll → function fires every 200ms ✅

🔬 Core Idea

“Allow execution only once per time window”

🧩 Step-by-Step Example

Scenario: Throttle with 1000ms (1 second)

User scrolls continuously.

Timeline

Time:   0ms   200ms   400ms   600ms   800ms   1000ms

Events:  ✔     ✔       ✔       ✔       ✔       ✔
Run:     ✅     ❌      ❌      ❌      ❌      ✅

👉 Only first and after 1s → execution happens

⚙️ How It Works Internally

Key idea:
Track last execution time
Ignore calls until delay passes

💻 Basic Throttle Implementation

javascript


function throttle(fn, delay) {
  let lastCall = 0;

  return function (...args) {
    const now = Date.now();

    if (now - lastCall >= delay) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}

🔍 Step-by-Step Internal Flow

First call

lastCall = 0
now = 1000

→ execute function
→ lastCall = 1000

Next call (within delay) now = 1200

1200 - 1000 = 200 < 1000 ❌
→ ignore

After delay now = 2000

2000 - 1000 = 1000 ✅
→ execute again

🧠 Visual Flow

Event → Check time → Execute or Ignore

⚙️ Alternative Implementation (Timer-Based)

function throttle(fn, delay) {
  let timer = null;

  return function (...args) {
    if (!timer) {
      fn.apply(this, args);

      timer = setTimeout(() => {
        timer = null;
      }, delay);
    }
  };
}

🔍 How This Version Works

First call → executes immediately
Sets a lock (timer)
Ignores calls until timer resets

⚡ Real-World Example
Scroll Handler

window.addEventListener(
  "scroll",
  throttle(() => {
    console.log("Scroll handled");
  }, 200)
);

👉 Instead of 100+ calls/sec → controlled calls

🧠 Use Cases

✅ Best for:
Scroll tracking
Window resize
Mouse movement
Button spam prevention

⚖️ Throttle vs Debounce (Deep Comparison)

🔥 Advanced Throttle (Leading + Trailing)


function throttle(fn, delay, options = { leading: true, trailing: true }) {
  let lastCall = 0;
  let timer;

  return function (...args) {
    const now = Date.now();

    if (!lastCall && options.leading === false) {
      lastCall = now;
    }

    const remaining = delay - (now - lastCall);

    if (remaining <= 0) {
      clearTimeout(timer);
      lastCall = now;
      fn.apply(this, args);
    } else if (!timer && options.trailing !== false) {
      timer = setTimeout(() => {
        lastCall = Date.now();
        timer = null;
        fn.apply(this, args);
      }, remaining);
    }
  };
}

🧠 Leading vs Trailing

⚠️ Common Mistakes

❌ Using debounce instead of throttle (wrong use case)
Scroll → use throttle
Input → use debounce

❌ Losing this context
Use:
fn.apply(this, args)

🧭 Mental Model

Throttle = “Run at fixed intervals, no matter how many events happen”

🎯 Final Takeaway

Throttling controls execution frequency
Ensures consistent performance
Critical for UI-heavy applications

What is Debouncing in JS?

Ashish Ghildiyal — Thu, 16 Apr 2026 10:04:23 +0000

debouncing is a technique to:

Delay the execution of a function until a certain time has passed since the last event

🧠 Simple Meaning

👉 Don’t run the function immediately
👉 Wait for the user to stop triggering events
👉 Then run the function once

🎯 Problem Debouncing Solves
Some events fire very frequently:

input typing
scroll
resize
mousemove

👉 Example:
If a user types “hello”, an API call might fire 5 times ❌

🎯 Real-Life Example (Typing)

Imagine a search box:

User types:

h → e → l → l → o

Each keypress is an event

❌ Without Delay

h → API call  
e → API call  
l → API call  
l → API call  
o → API call

👉 5 calls (wasteful ❌)

✅ With Debouncing (Delay Applied)

Let’s say delay = 500ms

Step-by-step:


1. User types “h”
Start timer (500ms)

2. User types “e” before 500ms
Cancel previous timer ❌  
Start new timer

3. User types “l”
Cancel again ❌  
Start new timer

4. User stops typing
No more events → timer completes ✅

Function executes ONCE

🔁 What “Delay Until Last Event” Actually Means

👉 Every new event:

Resets the delay
Prevents execution

👉 Only when:

No new events happen for delay time

👉 Then function runs

⚙️ Visual Timeline

Typing:   h   e   l   l   o
Time:     |---|---|---|---|---|

Timer:    reset reset reset reset → execute

🧠 Core Logic (Important)

Event happens
   ↓
Cancel previous execution
   ↓
Wait for delay
   ↓
If no new event → execute

💻 Code to Understand It

function debounce(fn, delay) {
  let timer;

  return function (...args) {
    clearTimeout(timer); // cancel previous

    timer = setTimeout(() => {
      fn(...args); // run after delay
    }, delay);
  };
}

Usage

const handleInput = debounce((e) => {
  console.log("API call:", e.target.value);
}, 500);

input.addEventListener("input", handleInput);

🔥 Super Simple Analogy

You’re waiting for someone to stop talking before replying.

If they keep talking → you wait
When they stop → you respond

👉 That’s debouncing

What is Coercion? How it works internally.

Ashish Ghildiyal — Sat, 11 Apr 2026 04:17:34 +0000

🧠 What is Coercion in JavaScript?

In JavaScript, coercion (type coercion) is:

The automatic or explicit conversion of a value from one type to another

🎯 Types of Coercion

Implicit Coercion (Automatic)

Done by the engine behind the scene

"5" + 2   // "52"

Explicit Coercion (Manual)

Number("5") // 5

String(10)  // "10"

⚙️ Why Coercion Exists

JavaScript is dynamically typed, so the engine must decide:

"How do I perform an operation when types differ?"

🔬 Internal Mechanism (Core Concept)

Behind the scenes, JavaScript follows ECMAScript abstract operations, mainly:

Key Internal Algorithms:
ToPrimitive
ToNumber
ToString
ToBoolean

These are not actual JS functions—they are engine-level conversion rules.

🧩 1. ToPrimitive (Most Important)

Before any operation, JS tries to convert values into a primitive type.

Example:
[] + {}
Step-by-step:
[] → ToPrimitive → ""
{} → ToPrimitive → "[object Object]"

👉 Final:

"" + "[object Object]" → "[object Object]"

⚙️ How ToPrimitive Works

For objects:

Try valueOf()
If not primitive → try toString()

Example:
let obj = {
  valueOf() { return 10; }
};

obj + 5 // 15

🧩 2. ToNumber

Used in math operations:

"5" - 2  // 3
Internally:
"5" → ToNumber → 5

Rules:

🧩 3. ToString

Used when concatenation happens:

5 + "2" // "52"

Internally:
5 → "5"

🧩 4. ToBoolean

Used in conditions:

if ("hello") // true

Falsy Values:
false, 0, "", null, undefined, NaN

Everything else → truthy

⚙️ Operator-Based Coercion

🔥 + Operator (Special Case)

1 + "2"  // "12"

👉 If ANY operand is string → string concatenation

➖ Other Operators

"5" - 2  // 3
"5" * 2  // 10

👉 Always convert to number

🔍 Comparison Coercion (==)

Example:
"5" == 5 // true

Internal Steps:

Types different → convert both to number
"5" → 5
Compare → true

Weird Cases:

null == undefined // true
[] == false       // true

Why?
[] → ToPrimitive → ""
"" → ToNumber → 0
false → 0

👉 0 == 0 → true

⚠️ Strict Equality (===)

"5" === 5 // false

👉 No coercion

🔬 Full Internal Flow Example

[] == false

Step-by-step:

[] → ToPrimitive → ""
"" → ToNumber → 0
false → ToNumber → 0
0 == 0 → true

🧠 Real Mental Model

Think like this:

JS tries to normalize types before performing operations

⚡** Common Pitfalls**

❌ Unexpected coercion

[] + [] // ""
[] + {} // "[object Object]"

❌ Boolean confusion

Boolean("0") // true
Boolean(0)   // false

🧭 Best Practices

✅ Use strict equality
=== instead of ==
✅ Convert explicitly
Number(value)
String(value)
Boolean(value)

❌ Avoid relying on implicit coercion

🎯 Final Insight

Coercion is not random—it follows strict internal rules:

Object → Primitive → Number/String → Operation