JavaScript Data Types: Complete Guide for Developers

📋 Table of Contents

1. What are JavaScript Data Types?
2. Why Do We Need Data Types?
3. Real-World Use Cases
4. Syntax
5. Internal Working
6. Memory Diagram
7. Data Flow Diagram
8. Code Examples
9. Common Mistakes
10. Performance Considerations
11. Interview Questions
12. Cheat Sheet
13. Summary

---

1. What are JavaScript Data Types?

Data types define the kind of value a variable can hold and determine how that value is stored in memory and what operations can be performed on it.

Type System Overview

┌─────────────────────────────────────────────────────────────┐
│         JAVASCRIPT TYPE SYSTEM                               │
└─────────────────────────────────────────────────────────────┘

JavaScript Data Types
         |
    ┌────┴────┐
    |         |
Primitive  Reference
    |         |
    |         └─── Objects (Complex Types)
    |              • Object
    |              • Array
    |              • Function
    |              • Date
    |              • RegExp
    |              • Map, Set, WeakMap, WeakSet
    |              • Error types
    |
    └─── 7 Primitive Types
         • String
         • Number
         • Boolean
         • Undefined
         • Null
         • BigInt (ES2020)
         • Symbol (ES2015)

Primitive vs Reference Types

┌─────────────────────────────────────────────────────────────┐
│         PRIMITIVE vs REFERENCE TYPES                         │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  Primitive Types                                             │
│  ───────────────                                            │
│  ✓ Immutable (cannot be changed)                            │
│  ✓ Stored by value                                          │
│  ✓ Stored in Stack memory                                   │
│  ✓ Compared by value                                        │
│  ✓ Fixed size                                               │
│  ✓ Fast access                                              │
│                                                              │
│  Examples:                                                   │
│  let x = 5;                                                  │
│  let name = "John";                                          │
│  let flag = true;                                            │
│                                                              │
│  ─────────────────────────────────────────────────────      │
│                                                              │
│  Reference Types                                             │
│  ───────────────                                            │
│  ✓ Mutable (can be changed)                                 │
│  ✓ Stored by reference                                      │
│  ✓ Stored in Heap memory                                    │
│  ✓ Compared by reference                                    │
│  ✓ Dynamic size                                             │
│  ✓ Slower access (pointer indirection)                      │
│                                                              │
│  Examples:                                                   │
│  let obj = { name: "John" };                                │
│  let arr = [1, 2, 3];                                       │
│  let fn = function() {};                                    │
│                                                              │
└─────────────────────────────────────────────────────────────┘

---

2. Why Do We Need Data Types?

Understanding data types is essential for writing efficient and bug-free JavaScript code.

---

3. Real-World Use Cases

Data types are used everywhere in JavaScript applications, from simple variables to complex data structures.

---

4. Syntax

Primitive Types

// String
let str1 = "Double quotes";
let str2 = 'Single quotes';
let str3 = `Template literal`;

// Number
let integer = 42;
let float = 3.14;
let negative = -10;

// Boolean
let isTrue = true;
let isFalse = false;

// Undefined
let notDefined;

// Null
let empty = null;

// BigInt
let bigInt = 9007199254740991n;

// Symbol
let sym = Symbol("description");

---

5. Internal Working

JavaScript stores primitive values directly in the stack and reference values in the heap with pointers in the stack.

---

6. Memory Diagram

Stack Memory:
┌──────────────┐
│ x: 42        │  (primitive)
│ obj: 0x1000  │  (reference)
└──────────────┘
       |
       v
Heap Memory:
┌──────────────┐
│ 0x1000:      │
│ { name: "J" }│
└──────────────┘

---

7. Data Flow Diagram

Type coercion flows through JavaScript's type conversion rules when operations involve mixed types.

---

8. Code Examples

Example 1: All Primitive Types

const name = "John";
const age = 30;
const isActive = true;
let notAssigned;
let emptyValue = null;
const bigNumber = 9007199254740991n;
const id = Symbol("id");

Example 2: Type Coercion

console.log("5" + 3);    // "53"
console.log("5" - 3);    // 2
console.log(5 == "5");   // true
console.log(5 === "5");  // false

---

9. Common Mistakes

Mistake 1: Using == instead of ===

// ❌ Wrong
if (0 == false) { }  // true

// ✅ Correct
if (0 === false) { }  // false

Mistake 2: typeof null

// ❌ Wrong
if (typeof value === "null") { }

// ✅ Correct
if (value === null) { }

---

10. Performance Considerations

Primitives are faster than objects because they're stored in stack memory with direct access.

---

11. Interview Questions

Q1: How many data types does JavaScript have?

Answer: 8 data types - 7 primitives (String, Number, Boolean, Undefined, Null, BigInt, Symbol) and 1 reference type (Object).

Q2: What's the difference between null and undefined?

Answer: undefined means a variable is declared but not assigned. null is an intentional absence of value assigned by the developer.

---

12. Cheat Sheet

// PRIMITIVE TYPES
String, Number, Boolean, Undefined, Null, BigInt, Symbol

// TYPE CHECKING
typeof value
Array.isArray(value)
value instanceof Constructor

// EQUALITY
==   // Loose
===  // Strict

// MEMORY
Primitives: Stack
Objects: Heap

---

13. Summary

Key Takeaways

✅ 8 data types: 7 primitives + Object
✅ Primitives are immutable and stored by value
✅ Objects are mutable and stored by reference
✅ Use === for strict equality
✅ typeof null returns "object" (bug)
✅ BigInt for large integers
✅ Symbol for unique identifiers

Understanding JavaScript data types is fundamental to writing reliable code and succeeding in technical interviews.