03. Datatypes Deep Dive: Primitives vs Reference Objects & Memory Layout • JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) • Rishabh Ki Kaksha

JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) › 03. Datatypes Deep Dive: Primitives vs Reference Objects & Memory Layout

45 mins

← Prev Next →

Course Syllabus

Module 1: Foundations & Evolution (Zero Level to Syntax Mastery)

01. What is JavaScript? History, TC39 & Client vs Server Execution 02. How Browsers Execute JS & The Critical Rendering Path 03. Datatypes Deep Dive: Primitives vs Reference Objects & Memory Layout 04. Variables, Scope & The Temporal Dead Zone (var vs let vs const) 05. Type Coercion, Equality Quirks (== vs ===, NaN & Object.is)

Module 2: V8 Engine Internals & Execution Context Architecture

06. Google V8 Engine Architecture: Ignition, Sparkplug & TurboFan 07. Execution Context Lifecycle: Creation Phase vs Execution Phase 08. Garbage Collection Mechanics & Memory Leak Profiling

Module 3: Functions, Closures & Functional Programming Patterns

09. First-Class Functions, Arrow Functions & Lexical this Binding 10. Closures Deep Dive: Encapsulation, Factory Functions & Memory Overhead 11. Currying, Partial Application & Function Composition (Pipe/Compose) 12. Method Borrowing: call(), apply(), bind() & Custom Polyfills

Module 4: Asynchronous Architecture, Event Loop & Promises

13. Event Loop Masterclass: Call Stack, Web APIs, Microtasks & Macrotasks 14. Promises Architecture: States, Chaining & Custom MyPromise Polyfill 15. Promise Combinators: all, allSettled, race, any & Concurrency Control 16. async/await Internals, Generators (function*) & Coroutine Emulation

Module 5: Objects, Prototypes, Classes & Metaprogramming

17. Prototypal Inheritance, Prototype Chain & __proto__ vs prototype 18. ES6 Classes, Static Blocks, Private Fields and Subclassing 19. Metaprogramming with Proxy & Reflect API (Reactive State Engine)

Module 6: Browser DOM, Event Architecture & High-Scale Polyfills

20. DOM Event Propagation: Capturing, Target, Bubbling & Delegation 21. Debouncing vs Throttling: Production Polyfills with Leading & Trailing Flags 22. Big Tech Machine Coding: Custom EventEmitter & PubSub System 23. Big Tech Machine Coding: Deep Clone with Circular References & LRU Cache

Interactive Lesson Studio

# 03. Datatypes Deep Dive: Primitives vs Reference Objects & Memory Layout

> JavaScript Notes by Rishabh - Topic 03

---

### 1. JavaScript Ke 8 Datatypes (Asaan Bhasha Me)

JavaScript me total **8 Datatypes** hote hain, jo 2 category me divided hain:

#### A) 7 Primitive Types (Chhote, Immutable, Seedhe Stack Me Store Hote Hain)
1.  **`number`**: Integers aur decimals dono same number type hain (`let x = 42; let pi = 3.14`). 64-bit float format.
2.  **`string`**: Text values (`"hello"`, `'rishabh'`, `` `backticks` ``).
3.  **`boolean`**: Sirf do value - `true` ya `false`.
4.  **`undefined`**: Variable banaya par value nahi di (`let a;` -> `a` is undefined).
5.  **`null`**: Jaan-bujh kar di gayi empty value (`let user = null;`).
6.  **`bigint`**: Bohot bade numbers ke liye jo `2^53 - 1` se bade hain (`12345678901234567890n`).
7.  **`symbol`**: Guaranteed unique identifier jo object keys me use hota hai (`Symbol("id")`).

#### B) 1 Reference Type (Bada, Mutable, Heap Me Store Hota Hai)
*   **`Object`**: Har complex cheez JavaScript me Object hoti hai - jaise Arrays `[]`, Functions `function(){}`, Objects `{}`, Date, Map, Set.

---

### 2. Memory Layout - Stack vs Heap (Sabse Bada Concept)

Computer me JS 2 tarah ki memory use karta hai:

```
[ CALL STACK ]                              [ MEMORY HEAP ]
+-------------------------+                 +----------------------------+
| let name = "Rishabh"    | (Direct Value)  |                            |
| let age = 24            | (Direct Value)  |                            |
| let user = Pointer #001 | --------------> | #001: { name: 'Rishabh',   |
+-------------------------+                 |         role: 'Admin' }    |
                                            +----------------------------+
```

1.  **Stack Memory (Fast & Lightweight):**
    *   Yahan Primitive values direct store hoti hain.
    *   Jab variable copy karte hain, to **naya independent value** banta hai:
    ```javascript
    let a = 10;
    let b = a; // b me 10 ki nayi copy bani
    b = 20;
    console.log(a); // 10 (a pe koi asar nahi hua!)
    ```

2.  **Heap Memory (Large & Dynamic):**
    *   Objects, Arrays aur Functions Heap me store hote hain.
    *   Stack me sirf uska **Memory Address (Pointer)** hota hai.
    *   Jab object copy karte hain, to naya object nahi banta, **wahi same address copy hota hai**:
    ```javascript
    let obj1 = { name: "Rishabh" };
    let obj2 = obj1; // obj2 ko wahi same memory address mila!
    obj2.name = "Aman";
    console.log(obj1.name); // "Aman" (Dono change ho gaye!)
    ```

---

### 3. Special Quirks & JS Bugs (Interview Special)

#### Bug 1: `typeof null === 'object'`
*   1995 me JS banate waqt binary type tag 000 object ke liye tha aur null ka pointer 000 tha.
*   Isliye JS `typeof null` ko `"object"` bolti hai. Ye ek 30 saal purana historic bug hai jo backward compatibility ke liye fix nahi kiya gaya.

#### Bug 2: Floating Point Precision (`0.1 + 0.2 !== 0.3`)
*   Computers binary me kaam karte hain, isliye `0.1 + 0.2 === 0.30000000000000004` aata hai.
*   **Fix:** `Math.abs((0.1 + 0.2) - 0.3) < Number.EPSILON` use karte hain.

---

### 4. Comparison Table: Primitives vs Reference Types

| Feature | Primitive Types | Reference Types (Objects) |
| :--- | :--- | :--- |
| **Storage** | Stack Memory | Heap Memory (Stack me Pointer) |
| **Mutability** | Immutable (Change nahi hota) | Mutable (Properties change ho sakti hain) |
| **Copy Behavior** | Pass by Value (Fresh Copy) | Pass by Reference (Same memory address) |
| **Comparison** | Compares actual Value (`10 === 10`) | Compares Memory Address (`{} === {}` is `false`!) |
| **Examples** | `number`, `string`, `boolean`, `null` | `{...}`, `[...]`, `function` |

---

### 5. Interview Ke 4 Sawal Is Topic Se

1.  **`{} === {}` true hai ya false?** -> `false`! Dono Heap memory me alag-alag addresses par bane hain.
2.  **`null` aur `undefined` me kya farak hai?** -> `undefined` matlab variable declare hua par value assign nahi hui (system default). `null` matlab developer ne jaan-bujh kar empty value di hai.
3.  **Primitive types immutable kyun hote hain?** -> Agar `"hello"` ko change karke `"Hello"` karte hain, to purani string change nahi hoti balki memory me nayi string ban jati hai.
4.  **Symbol datatype ka real-world use kya hai?** -> Object me private / collision-free hidden properties banane ke liye, jo normal `for...in` loop me leak nahi hoti.

---
**Next Topic:** 04. Variables, Scope & The Temporal Dead Zone (var vs let vs const)

Loading lesson content...

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track