Primitive Types

// JavaScript has exactly 7 primitive types
const str = "hello";           // string
const num = 42;                // number
const big = 9007199254740993n; // bigint
const bool = true;             // boolean
const undef = undefined;       // undefined
const nul = null;              // null
const sym = Symbol("id");      // symbol

console.log(typeof str);   // "string"
console.log(typeof num);   // "number"
console.log(typeof nul);   // "object" — Wait, what?!

```javascript
let name = "Alice";
name.toUpperCase();    // Creates "ALICE" but doesn't change 'name'
console.log(name);     // Still "Alice"
```

```javascript
let a = "hello";
let b = "hello";
console.log(a === b);  // true - same value

let obj1 = { text: "hello" };
let obj2 = { text: "hello" };
console.log(obj1 === obj2);  // false - different objects!
```

```javascript
"hello".toUpperCase();  // Works! JS wraps "hello" in a String object
```

We'll explore this magic in detail later.

┌─────────────────────────────────────────────────────────────────────────┐
│                     PRIMITIVES VS OBJECTS                                │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   PRIMITIVES (Atoms)                    OBJECTS (Molecules)              │
│                                                                          │
│   ┌───┐  ┌─────┐  ┌──────┐             ┌────────────────────────────┐   │
│   │ 5 │  │"hi" │  │ true │             │ { name: "Alice", age: 25 } │   │
│   └───┘  └─────┘  └──────┘             └────────────────────────────┘   │
│                                                                          │
│   • Simple, indivisible                 • Complex, contains values       │
│   • Stored directly                     • Stored as reference            │
│   • Compared by value                   • Compared by reference          │
│   • Immutable                           • Mutable                        │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

// Three ways to create strings
let single = 'Hello';           // Single quotes
let double = "World";           // Double quotes
let backtick = `Hello World`;   // Template literal (ES6)

let name = "Alice";
let age = 25;

// String interpolation - embed expressions
let greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting);        // "Hello, Alice! You are 25 years old."
console.log(typeof greeting); // "string" — it's just a string!

// Multi-line strings
let multiLine = `
  This is line 1
  This is line 2
`;
console.log(typeof multiLine); // "string"

let str = "hello";
str[0] = "H";        // Does nothing! No error, but no change
console.log(str);    // Still "hello"

// To "change" a string, create a new one
str = "H" + str.slice(1);
console.log(str);    // "Hello"

let integer = 42;        // Integer
let decimal = 3.14;      // Decimal
let negative = -10;      // Negative
let scientific = 2.5e6;  // 2,500,000 (scientific notation)

console.log(1 / 0);       // Infinity
console.log(-1 / 0);      // -Infinity
console.log("hello" * 2); // NaN (Not a Number)

console.log(0.1 + 0.2);           // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3);   // false! Welcome to JavaScript!

// Bad: floating-point errors in calculations
let price = 0.1 + 0.2;  // 0.30000000000000004

// Good: calculate in cents, format for display
let priceInCents = 10 + 20;  // 30 (calculation is accurate!)

// Use Intl.NumberFormat to display as currency
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});
console.log(formatter.format(priceInCents / 100));  // "$0.30"

// Works for any locale and currency!
const euroFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
});
console.log(euroFormatter.format(1234.56));  // "1.234,56 €"

console.log(Number.MAX_SAFE_INTEGER);  // 9007199254740991 (2^53 - 1)
console.log(Number.MIN_SAFE_INTEGER);  // -9007199254740991

// Beyond this range, precision is lost
console.log(9007199254740992 === 9007199254740993);  // true! (wrong!)

// Add 'n' suffix to create a BigInt
let big = 9007199254740993n;
let alsoBig = BigInt("9007199254740993");

console.log(big + 1n);  // 9007199254740994n (correct!)

// Cannot mix BigInt and Number
let big = 10n;
let regular = 5;
// console.log(big + regular);  // TypeError!

// Must convert explicitly
console.log(big + BigInt(regular));  // 15n
console.log(Number(big) + regular);  // 15

let isLoggedIn = true;
let hasPermission = false;

// From comparisons
let isAdult = age >= 18;        // true or false
let isEqual = name === "Alice"; // true or false

// Falsy values (only 8!)
false
0
-0
0n        // BigInt zero
""        // Empty string
null
undefined
NaN

// Everything else is truthy
"hello"   // truthy
42        // truthy
[]        // truthy (empty array!)
{}        // truthy (empty object!)

// Convert any value to boolean
let value = "hello";
let bool = Boolean(value);  // true
let shortcut = !!value;     // true (double negation trick)

// 1. Declared but not assigned
let x;
console.log(x);  // undefined

// 2. Missing function parameters
function greet(name) {
  console.log(name);  // undefined if called without argument
}
greet();

// 3. Function with no return statement
function doNothing() {
  // no return
}
console.log(doNothing());  // undefined

// 4. Accessing non-existent object property
let person = { name: "Alice" };
console.log(person.age);  // undefined

// Intentionally clearing a variable
let user = { name: "Alice" };
user = null;  // User logged out, clearing the reference

// Indicating no result
function findUser(id) {
  // ... search logic ...
  return null;  // User not found
}

console.log(typeof null);  // "object" — Wait, what?!

// How to properly check for null
let value = null;
console.log(value === null);  // true (use strict equality)

let id1 = Symbol("id");
let id2 = Symbol("id");

console.log(id1 === id2);  // false — always unique!
console.log(id1.description);  // "id" (the description)

const ID = Symbol("id");
const user = {
  name: "Alice",
  [ID]: 12345  // Symbol as property key
};

console.log(user.name);    // "Alice"
console.log(user[ID]);     // 12345

// Symbol keys don't appear in normal iteration
console.log(Object.keys(user));  // ["name"] — ID not included

// Symbol.iterator - make an object iterable
// Symbol.toStringTag - customize Object.prototype.toString
// Symbol.toPrimitive - customize type conversion

console.log(typeof "hello");     // "string"
console.log(typeof 42);          // "number"
console.log(typeof 42n);         // "bigint"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof Symbol());    // "symbol"
console.log(typeof null);        // "object" ⚠️ (bug!)
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"
console.log(typeof function(){}); // "function"

// Check for null specifically
let value = null;
if (value === null) {
  console.log("It's null");
}

// Check for arrays
Array.isArray([1, 2, 3]);  // true
Array.isArray("hello");    // false

// Get precise type with Object.prototype.toString
Object.prototype.toString.call(null);       // "[object Null]"
Object.prototype.toString.call([]);         // "[object Array]"
Object.prototype.toString.call(new Date()); // "[object Date]"

let str = "hello";

// These methods don't change 'str' — they return NEW strings
str.toUpperCase();     // Returns "HELLO"
console.log(str);      // Still "hello"!

// To capture the new value, you must reassign
str = str.toUpperCase();
console.log(str);      // Now "HELLO"

BEFORE str.toUpperCase():
┌─────────────────┐
│  str → "hello"  │   (original string)
└─────────────────┘

AFTER str.toUpperCase() (without reassignment):
┌─────────────────┐
│  str → "hello"  │   (unchanged!)
└─────────────────┘
┌─────────────────┐
│     "HELLO"     │   (new string, not captured, garbage collected)
└─────────────────┘

AFTER str = str.toUpperCase():
┌─────────────────┐
│  str → "HELLO"  │   (str now points to new string)
└─────────────────┘

// const prevents reassignment
const name = "Alice";
// name = "Bob";  // Error! Cannot reassign const

// But const doesn't make objects immutable
const person = { name: "Alice" };
person.name = "Bob";     // Works! Mutating the object
person.age = 25;         // Works! Adding a property
// person = {};          // Error! Cannot reassign const

// Primitives are immutable regardless of const/let
let str = "hello";
str[0] = "H";  // Silently fails — can't mutate primitive

// Don't do this!
let strObj = new String("hello");
console.log(typeof strObj);        // "object" (not "string"!)
console.log(strObj === "hello");   // false (object vs primitive)

// Do this instead
let str = "hello";
console.log(typeof str);           // "string"

// 2. Missing function arguments
function greet(name) {
  console.log(name);
}
greet();  // undefined

// 3. No return statement
function noReturn() {}
console.log(noReturn());  // undefined

// 4. Non-existent properties
let obj = {};
console.log(obj.missing);  // undefined

// 5. Array holes
let arr = [1, , 3];
console.log(arr[1]);  // undefined
```

// 2. Function returning "no result"
function findUser(id) {
  // Search logic...
  return null;  // Not found
}

// 3. Optional object properties
let config = {
  cache: true,
  timeout: null  // Explicitly no timeout
};

// 4. Resetting references
let timer = setTimeout(callback, 1000);
clearTimeout(timer);
timer = null;  // Clear reference
```

// Check for either null or undefined (loose equality)
if (value == null) {
  console.log("Value is null or undefined");
}

// Check for specifically undefined
if (value === undefined) {
  console.log("Value is undefined");
}

// Check for specifically null
if (value === null) {
  console.log("Value is null");
}

// Check for "has a value" (not null/undefined)
if (value != null) {
  console.log("Value exists");
}

┌─────────────────────────────────────────────────────────────────────────┐
│                     PRIMITIVES VS WRAPPER OBJECTS                        │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  WRONG WAY                              RIGHT WAY                        │
│  ─────────                              ─────────                        │
│  new String("hello")                    "hello"                          │
│  new Number(42)                         42                               │
│  new Boolean(true)                      true                             │
│                                                                          │
│  typeof new String("hi") → "object"     typeof "hi" → "string"          │
│  new String("hi") === "hi" → false      "hi" === "hi" → true            │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

// ❌ WRONG - Creates an object, not a primitive
const str = new String("hello");
console.log(typeof str);        // "object" (not "string"!)
console.log(str === "hello");   // false (object vs primitive)

// ✓ CORRECT - Use primitive literals
const str2 = "hello";
console.log(typeof str2);       // "string"
console.log(str2 === "hello");  // true

**Why?** This is a bug from JavaScript's first implementation in 1995. In the original code, values had a small label to identify their type. Objects had the label `000`, and `null` was represented as the NULL pointer (`0x00`), which also had `000`.

**Why not fixed?** A proposal to fix it was rejected because too much existing code checks `typeof x === "object"` and expects `null` to pass.

**Workaround:**
```javascript
// Always check for null explicitly
if (value !== null && typeof value === "object") {
  // It's a real object
}
```

NaN is so confused about its identity that it doesn't even equal itself!

**Why?** By the IEEE 754 specification, NaN represents "Not a Number", an undefined or unrepresentable result. Since it's not a specific number, it can't equal anything, including itself.

**How to check for NaN:**
```javascript
// Don't do this
if (value === NaN) { }  // Never true!

// Do this instead
if (Number.isNaN(value)) { }  // ES6, recommended
if (isNaN(value)) { }         // Older, has quirks
```

<Note>
[`isNaN()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN) converts the value first, so `isNaN("hello")` is `true`. [`Number.isNaN()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN) only returns `true` for actual `NaN`.
</Note>

**Why?** Computers store numbers in binary. Just like 1/3 can't be perfectly represented in decimal (0.333...), 0.1 can't be perfectly represented in binary.

**Solutions:**
```javascript
// 1. Work in integers (cents, not dollars) — RECOMMENDED
let totalCents = 10 + 20;  // 30 (accurate!)
let dollars = totalCents / 100;  // 0.3

// 2. Use Intl.NumberFormat for display
new Intl.NumberFormat('en-US', { 
  style: 'currency', 
  currency: 'USD' 
}).format(0.30);  // "$0.30"

// 3. Compare with tolerance for equality checks
Math.abs((0.1 + 0.2) - 0.3) < Number.EPSILON;  // true (Number.EPSILON is the smallest difference)

// 4. Use toFixed() for simple rounding
(0.1 + 0.2).toFixed(2);  // "0.30"
```

console.log("" == false);      // true (coercion)
console.log("" === false);     // false (different types)
```

**The lesson:** Be careful with truthy/falsy checks on strings. An empty string `""` is falsy, but a string with just whitespace `" "` is truthy.

```javascript
// Check for empty or whitespace-only string
if (str.trim() === "") {
  console.log("String is empty or whitespace");
}
```

**Why?** The `+` operator does addition for numbers, but concatenation for strings. When mixed, JavaScript converts numbers to strings.

**Be explicit:**
```javascript
// Force number addition
Number("1") + Number("2");  // 3
parseInt("1") + parseInt("2");  // 3

// Force string concatenation
String(1) + String(2);  // "12"
`${1}${2}`;  // "12"
```

Remember: Everything else is an object (arrays, functions, dates, etc.).

This is a bug from JavaScript's original implementation in 1995. Values were stored with type tags, and both objects and `null` had the same `000` tag. The bug was never fixed because too much existing code depends on this behavior.

To check for null, use `value === null` instead.

Just like 1/3 can't be perfectly represented in decimal (0.333...), 0.1 can't be perfectly represented in binary. The tiny rounding errors accumulate, giving us `0.30000000000000004` instead of `0.3`.

Solutions: Use integers (work in cents), use `toFixed()` for display, compare with tolerance, or use a decimal math library.

- **`null`**: Means "intentionally empty." Developers use this explicitly to indicate "this has no value on purpose."

Key difference: `undefined` is the *default* empty value; `null` is the *intentional* empty value.

```javascript
let x;           // undefined (automatic)
let y = null;    // null (explicit)
```

When you call a method on a primitive:
1. JavaScript temporarily wraps it in a wrapper object (`String`, `Number`, etc.)
2. The method is called on the wrapper object
3. The result is returned
4. The wrapper object is discarded

So `"hello".toUpperCase()` becomes `(new String("hello")).toUpperCase()` behind the scenes. The original primitive `"hello"` is never changed.

```javascript
console.log(NaN === NaN);  // false!
```

This is per the IEEE 754 floating-point specification. `NaN` represents an undefined or unrepresentable mathematical result, so it can't equal anything, including itself.

**How to check for NaN:**
```javascript
// ❌ WRONG - Never works!
if (value === NaN) { }

// ✓ CORRECT - Use Number.isNaN()
if (Number.isNaN(value)) { }
```