JavaScript Basics & Interview Recap: All You Need to Know

Jump to any chapter that interests you:

Prologue: Welcome to JavaScript Land

Imagine you're about to embark on a journey through JavaScript Land - a mystical place where variables dance, functions sing, and sometimes things don't behave quite as you'd expect. This isn't just another dry technical guide; it's the story of how JavaScript really works, told through examples, analogies, and the kind of insights that will save you during that crucial interview.

Our story begins with three siblings who couldn't be more different...

Chapter 1: The Tale of Three Siblings - var, let, and const

In the kingdom of JavaScript, there lived three siblings who handled variable declarations. Each had their own personality and rules about how they behaved in different situations.

The Eldest Sibling: var (The Rebellious One)

var was the oldest and most unpredictable. Born in the early days of JavaScript, var had some quirky habits:

// var's weird hoisting behavior
console.log("Hey there, " + name); // "Hey there, undefined" 
var name = "JavaScript";

// What actually happens behind the scenes:
var name; // hoisted and initialized with undefined
console.log("Hey there, " + name); 
name = "JavaScript";

var's characteristics:

Function scoped or globally scoped (ignores block boundaries like {})
Hoisted and initialized with undefined
Can be re-declared and updated without complaints
Prone to creating bugs due to its loose nature

// var ignores block scope - dangerous!
if (true) {
    var secret = "I escape blocks!";
}
console.log(secret); // "I escape blocks!" - var leaked out!

// Function scope works though
function keepSecret() {
    var actualSecret = "I'm safe here";
}
// console.log(actualSecret); // ReferenceError - can't escape functions

The Middle Child: let (The Responsible One)

let came along in ES6 as the responsible middle child, learning from var's mistakes:

// let's proper behavior
console.log(age); // ReferenceError: Cannot access 'age' before initialization
let age = 25;

let's characteristics:

Block scoped (respects {} boundaries)
Hoisted but NOT initialized - lives in the "Temporal Dead Zone" until declaration
Cannot be re-declared in same scope but can be updated
Much safer than var

// let respects block scope
if (true) {
    let secret = "I stay in my block";
}
// console.log(secret); // ReferenceError - secret is contained

// let prevents accidental re-declaration
let name = "Alice";
// let name = "Bob"; // SyntaxError - can't re-declare

// But updating is fine
name = "Bob"; // This works

The Youngest: const (The Unchanging One)

const is the strictest sibling, representing constants and immutable bindings:

// const must be initialized
// const PI; // SyntaxError - missing initializer

const PI = 3.14159;
// PI = 3.14; // TypeError - can't reassign

// But objects and arrays are tricky...
const person = { name: "Alice" };
person.name = "Bob"; // This works! We're not changing the reference
person.age = 30;     // This works too!

const numbers = [1, 2, 3];
numbers.push(4);     // This works! Array methods can modify contents
// numbers = [5, 6, 7]; // TypeError - can't reassign the reference

const's characteristics:

Block scoped like let
Hoisted but NOT initialized (Temporal Dead Zone)
Cannot be re-declared or reassigned
For objects/arrays, the reference is constant but contents can mutate

The Temporal Dead Zone: A Mysterious Place

The Temporal Dead Zone (TDZ) is like a limbo where let and const variables exist but cannot be accessed:

console.log(typeof myVar);   // "undefined" - var is forgiving
console.log(typeof myLet);   // ReferenceError - TDZ strikes!

var myVar = "I'm hoisted and initialized";
let myLet = "I'm hoisted but in TDZ until now";

Chapter 2: The Data Type Kingdom

In JavaScript Land, every value belongs to one of several tribes, each with their own customs and behaviors.

The Primitive Tribes

The Number Clan

// All numbers in JavaScript are floating-point
let integer = 42;
let decimal = 3.14159;
let scientific = 2.998e8; // 299,800,000
let negative = -273.15;

// Special number values
let infinity = Infinity;
let negInfinity = -Infinity;
let notANumber = NaN;

// Fun fact: NaN is not equal to itself!
console.log(NaN === NaN); // false (the only value in JS that isn't equal to itself)
console.log(Number.isNaN(NaN)); // true (the correct way to check)

The String Tribe

// Multiple ways to create strings
let single = 'Single quotes';
let double = "Double quotes";
let template = `Template literals with ${single}`;

// String methods are like magical spells
let spell = "Abracadabra";
console.log(spell.length);           // 11
console.log(spell.toUpperCase());    // "ABRACADABRA"
console.log(spell.slice(0, 5));      // "Abrac"
console.log(spell.includes("cada")); // true

The Boolean Clan (The Truth Tellers)

let truth = true;
let falsehood = false;

// The fascinating world of truthiness and falsiness
// Falsy values (the "falsy gang"):
console.log(Boolean(false));     // false
console.log(Boolean(0));         // false
console.log(Boolean(-0));        // false
console.log(Boolean(0n));        // false (BigInt zero)
console.log(Boolean(""));        // false (empty string)
console.log(Boolean(null));      // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN));       // false

// Everything else is truthy!
console.log(Boolean("0"));       // true (string "0")
console.log(Boolean([]));        // true (empty array)
console.log(Boolean({}));        // true (empty object)

The null and undefined Twins

// null: intentional absence of value
let intentionallyEmpty = null;

// undefined: variable exists but has no value
let notYetAssigned;
console.log(notYetAssigned); // undefined

// The confusing part
console.log(typeof null);      // "object" (famous JavaScript bug!)
console.log(typeof undefined); // "undefined"
console.log(null == undefined);  // true (they're similar)
console.log(null === undefined); // false (but not identical)

The Symbol Tribe (The Unique Ones)

// Symbols are always unique
let sym1 = Symbol("description");
let sym2 = Symbol("description");
console.log(sym1 === sym2); // false - always unique!

// Often used as object keys to avoid conflicts
const PRIVATE_PROP = Symbol("private");
let obj = {
    name: "Public",
    [PRIVATE_PROP]: "Hidden"
};

The BigInt Giants

// For numbers larger than Number.MAX_SAFE_INTEGER
let huge = 1234567890123456789012345678901234567890n;
let alsoHuge = BigInt("9007199254740991999999");

// Can't mix BigInt with regular numbers
// console.log(huge + 1); // TypeError
console.log(huge + 1n);   // Works with BigInt

The Object Kingdom

Objects are the rulers of JavaScript Land, and everything else pays tribute to them.

// Objects are collections of key-value pairs
let kingdom = {
    name: "JavaScript Land",
    population: Infinity,
    ruler: "The Great Function",
    
    // Methods are functions stored as properties
    speak: function() {
        return `Welcome to ${this.name}!`;
    },
    
    // ES6 shorthand for methods
    greet() {
        return this.speak();
    }
}
// Multiple ways to access properties
console.log(kingdom.name);           // Dot notation
console.log(kingdom["population"]);  // Bracket notation
let prop = "ruler";
console.log(kingdom[prop]);          // Dynamic access

Chapter 3: The Operator Guild

In JavaScript Land, operators are like tools in a craftsman's workshop. Each has its purpose and peculiarities.

The Arithmetic Workers

let a = 10, b = 3;

console.log(a + b);  // 13 - Addition
console.log(a - b);  // 7  - Subtraction
console.log(a * b);  // 30 - Multiplication
console.log(a / b);  // 3.333... - Division
console.log(a % b);  // 1  - Modulus (remainder)
console.log(a ** b); // 1000 - Exponentiation

// The tricky + operator
console.log("5" + 3);   // "53" - string concatenation
console.log(5 + "3");   // "53" - still string concatenation
console.log(+"5" + 3);  // 8 - unary + converts to number

The Comparison Detectives

// The notorious == vs === case
console.log(5 == "5");   // true  - loose equality (type coercion)
console.log(5 === "5");  // false - strict equality (no coercion)

console.log(null == undefined);  // true  - special case
console.log(null === undefined); // false - different types

// Other comparisons
console.log(10 > 5);   // true
console.log(10 >= 10); // true
console.log("a" < "b"); // true - lexicographic comparison

The Logical Philosophers

// && (AND) - returns first falsy value or last value
console.log(true && false);     // false
console.log("hello" && "world"); // "world"
console.log("" && "world");     // "" (empty string is falsy)

// || (OR) - returns first truthy value or last value
console.log(true || false);     // true
console.log("" || "default");   // "default"
console.log("hello" || "world"); // "hello"

// ! (NOT) - flips truthiness
console.log(!true);    // false
console.log(!"hello"); // false
console.log(!!"hello"); // true (double negation converts to boolean)

The Assignment Helpers

let score = 10;
score += 5;  // score = score + 5 → 15
score -= 3;  // score = score - 3 → 12
score *= 2;  // score = score * 2 → 24
score /= 4;  // score = score / 4 → 6
score %= 4;  // score = score % 4 → 2

Chapter 4: The Control Flow Chronicles

Every good story needs plot twists and decision points. In JavaScript, control flow structures are how we tell our code which path to take.

The Decision Makers

The if-else Saga

let weather = "sunny";
let mood;

if (weather === "sunny") {
    mood = "happy";
} else if (weather === "rainy") {
    mood = "contemplative";
} else if (weather === "stormy") {
    mood = "dramatic";
} else {
    mood = "confused"; // What kind of weather is this?
}

// The ternary operator - for quick decisions
let clothing = weather === "sunny" ? "t-shirt" : "jacket";

// Nested ternary (use sparingly - can get confusing!)
let activity = weather === "sunny" ? "beach" 
             : weather === "rainy" ? "reading"
             : "staying in";

The Switch Statement - The Great Sorter

let day = "monday";
let activity;

switch (day.toLowerCase()) {
    case "monday":
    case "tuesday":
    case "wednesday":
    case "thursday":
    case "friday":
        activity = "work";
        break; // Don't forget break!
    case "saturday":
        activity = "chores";
        break;
    case "sunday":
        activity = "rest";
        break;
    default:
        activity = "time travel?";
}

// Without breaks, you get fall-through behavior
let grade = "B";
switch (grade) {
    case "A":
        console.log("Excellent!");
    case "B":
        console.log("Good job!"); // This will print for both A and B
    case "C":
        console.log("Not bad");   // This will print for A, B, and C
        break;
}

The Loop Adventurers

The for Loop - The Methodical Explorer

// Classic for loop
for (let i = 0; i < 5; i++) {
    console.log(`Iteration ${i}`);
}

// for...of - iterates over values
let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
    console.log(`I love ${fruit}s!`);
}

// for...in - iterates over keys/indices
let person = { name: "Alice", age: 30, city: "Wonderland" };
for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

// for...in with arrays (usually not recommended)
for (let index in fruits) {
    console.log(`${index}: ${fruits[index]}`); // index is a string!
}

The while Loop - The Patient Waiter

let count = 0;
while (count < 3) {
    console.log(`Count is ${count}`);
    count++; // Don't forget to increment or you'll have an infinite loop!
}

// do...while - executes at least once
let userInput;
do {
    userInput = prompt("Enter 'quit' to exit:");
} while (userInput !== "quit");

Loop Control - Breaking Free

// break - escape the loop entirely
for (let i = 0; i < 10; i++) {
    if (i === 5) break;
    console.log(i); // prints 0, 1, 2, 3, 4
}

// continue - skip to next iteration
for (let i = 0; i < 5; i++) {
    if (i === 2) continue;
    console.log(i); // prints 0, 1, 3, 4 (skips 2)
}

// Labeled breaks (rarely used but good to know)
outer: for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (i === 1 && j === 1) break outer;
        console.log(`${i}, ${j}`);
    }
}

Chapter 5: The Function Chronicles

Functions are the heroes of JavaScript Land - they're reusable, powerful, and can take many forms.

The Different Types of Function Heroes

Function Declarations - The Traditional Knights

// Hoisted completely - can be called before declaration
greet("World"); // This works!

function greet(name) {
    return `Hello, ${name}!`;
}

// Functions with multiple parameters
function introduce(name, age, profession = "adventurer") {
    return `Hi, I'm ${name}, ${age} years old, and I'm a ${profession}.`;
}

console.log(introduce("Alice", 25)); // Uses default profession
console.log(introduce("Bob", 30, "wizard"));

Function Expressions - The Anonymous Agents

// Not hoisted like declarations
// greet("World"); // ReferenceError if called here

const greet = function(name) {
    return `Hello, ${name}!`;
};

// Named function expressions (good for debugging)
const factorial = function fact(n) {
    return n <= 1 ? 1 : n * fact(n - 1);
};

Arrow Functions - The Modern Ninjas

// Concise syntax
const greet = (name) => `Hello, ${name}!`;

// Different syntaxes based on parameters and body
const sayHi = () => "Hi!";                    // No parameters
const double = x => x * 2;                   // Single parameter
const add = (a, b) => a + b;                 // Multiple parameters
const complexFunc = (x, y) => {              // Multi-line body
    const result = x * y;
    return result + 1;
};

// Arrow functions and 'this' - they don't have their own!
const obj = {
    name: "Alice",
    greetTraditional: function() {
        return `Hello, I'm ${this.name}`;     // 'this' refers to obj
    },
    greetArrow: () => {
        return `Hello, I'm ${this.name}`;     // 'this' is undefined or global
    }
};

console.log(obj.greetTraditional()); // "Hello, I'm Alice"
console.log(obj.greetArrow());       // "Hello, I'm undefined"

Advanced Function Techniques

Rest Parameters and Spread Operator

// Rest parameters - collect arguments into array
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

// Mix regular and rest parameters
function introduce(name, age, ...hobbies) {
    console.log(`${name} is ${age} and likes: ${hobbies.join(", ")}`);
}

introduce("Alice", 25, "reading", "coding", "hiking");

// Spread operator - expand arrays/objects
const nums1 = [1, 2, 3];
const nums2 = [4, 5, 6];
const combined = [...nums1, ...nums2]; // [1, 2, 3, 4, 5, 6]

// Spread with objects
const person = { name: "Alice", age: 25 };
const employee = { ...person, job: "Developer", age: 26 }; // age gets overwritten

Higher-Order Functions - The Function Manipulators

// Functions that take other functions as arguments
function repeat(fn, times) {
    for (let i = 0; i < times; i++) {
        fn(i);
    }
}

repeat(i => console.log(`Iteration ${i}`), 3);

// Functions that return functions
function createMultiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15

Chapter 6: The Array Adventures

Arrays are like organized lists in JavaScript Land, and they come with an arsenal of powerful methods.

Creating and Accessing Arrays

// Different ways to create arrays
let fruits = ["apple", "banana", "cherry"];
let numbers = new Array(1, 2, 3, 4, 5);
let mixed = ["text", 42, true, null, { name: "object" }];

// Array length and access
console.log(fruits.length);    // 3
console.log(fruits[0]);        // "apple"
console.log(fruits[-1]);       // undefined (no negative indexing)
console.log(fruits[fruits.length - 1]); // "cherry" (last element)

// Sparse arrays - arrays with holes
let sparse = new Array(3);     // [empty × 3]
sparse[1] = "middle";          // [empty, "middle", empty]

The Mutating Methods - The Array Transformers

let heroes = ["Batman", "Superman"];

// Adding elements
heroes.push("Wonder Woman");           // Add to end → ["Batman", "Superman", "Wonder Woman"]
heroes.unshift("Aquaman");            // Add to beginning → ["Aquaman", "Batman", "Superman", "Wonder Woman"]

// Removing elements  
let lastHero = heroes.pop();          // Remove from end → "Wonder Woman"
let firstHero = heroes.shift();       // Remove from beginning → "Aquaman"

// splice - the Swiss Army knife
let villains = ["Joker", "Lex Luthor", "Penguin", "Riddler"];
let removed = villains.splice(1, 2);  // Remove 2 elements starting at index 1
console.log(villains);                // ["Joker", "Riddler"]
console.log(removed);                 // ["Lex Luthor", "Penguin"]

// splice can also add elements
villains.splice(1, 0, "Catwoman", "Two-Face"); // Insert at index 1
console.log(villains); // ["Joker", "Catwoman", "Two-Face", "Riddler"]

The Non-Mutating Methods - The Array Philosophers

let numbers = [1, 2, 3, 4, 5];

// map - transform each element
let doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter - select elements that pass a test
let evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

// reduce - accumulate values into a single result
let sum = numbers.reduce((acc, current) => acc + current, 0);
console.log(sum); // 15

// More complex reduce example
let words = ["Hello", "beautiful", "world"];
let sentence = words.reduce((acc, word, index) => {
    return acc + word + (index < words.length - 1 ? " " : "!");
}, "");
console.log(sentence); // "Hello beautiful world!"

// find - get first element that matches
let found = numbers.find(n => n > 3);
console.log(found); // 4

// findIndex - get index of first match
let foundIndex = numbers.findIndex(n => n > 3);
console.log(foundIndex); // 3

// some - test if any element passes
let hasEven = numbers.some(n => n % 2 === 0);
console.log(hasEven); // true

// every - test if all elements pass
let allPositive = numbers.every(n => n > 0);
console.log(allPositive); // true

// includes - check if value exists
console.log(numbers.includes(3)); // true
console.log(numbers.includes(10)); // false

Array Destructuring - The Unpacking Magician

let colors = ["red", "green", "blue", "yellow"];

// Basic destructuring
let [first, second] = colors;
console.log(first);  // "red"
console.log(second); // "green"

// Skip elements
let [primary, , tertiary] = colors;
console.log(primary);  // "red"
console.log(tertiary); // "blue"

// Rest in destructuring
let [main, ...others] = colors;
console.log(main);   // "red"
console.log(others); // ["green", "blue", "yellow"]

// Default values
let [a, b, c, d, e = "purple"] = colors;
console.log(e); // "yellow" (from array)

let [x, y, z, w, v = "purple"] = ["red", "green"];
console.log(v); // "purple" (default value)

Chapter 7: The Object Kingdom Chronicles

Objects are the heart of JavaScript Land. Everything else either is an object or can become one.

Object Creation and Access

// Object literal syntax
let wizard = {
    name: "Gandalf",
    age: 2019,
    staff: "wooden",
    spells: ["fireball", "lightning", "heal"],
    
    // Methods
    castSpell: function(spellName) {
        return `${this.name} casts ${spellName}!`;
    },
    
    // ES6 method shorthand
    meditate() {
        return `${this.name} is meditating...`;
    }
};

// Property access
console.log(wizard.name);           // Dot notation
console.log(wizard["age"]);         // Bracket notation
console.log(wizard.spells[0]);      // Accessing array property

// Dynamic property access
let prop = "staff";
console.log(wizard[prop]);          // "wooden"

// Computed property names
let skill = "magic";
let level = "expert";
let mage = {
    name: "Merlin",
    [skill]: level,                 // Computed property: magic: "expert"
    [`${skill}Level`]: 95           // magicLevel: 95
};

Object Destructuring - The Property Extractor

let hero = {
    name: "Wonder Woman",
    realName: "Diana Prince",
    powers: ["super strength", "flight", "lasso of truth"],
    team: "Justice League"
};

// Basic destructuring
let { name, powers } = hero;
console.log(name);   // "Wonder Woman"
console.log(powers); // ["super strength", "flight", "lasso of truth"]

// Renaming variables
let { realName: secretIdentity } = hero;
console.log(secretIdentity); // "Diana Prince"

// Default values
let { weakness = "none", team } = hero;
console.log(weakness); // "none"
console.log(team);     // "Justice League"

// Nested destructuring
let villain = {
    name: "Joker",
    base: {
        location: "Arkham Asylum",
        security: "maximum"
    }
};

let { base: { location, security } } = villain;
console.log(location); // "Arkham Asylum"
console.log(security); // "maximum"

// Rest in object destructuring
let { name: heroName, ...otherProps } = hero;
console.log(heroName);   // "Wonder Woman"
console.log(otherProps); // { realName: "Diana Prince", powers: [...], team: "Justice League" }

Object Methods and this Context

let calculator = {
    result: 0,
    
    add(num) {
        this.result += num;
        return this; // Return this for method chaining
    },
    
    multiply(num) {
        this.result *= num;
        return this;
    },
    
    reset() {
        this.result = 0;
        return this;
    },
    
    getValue() {
        return this.result;
    }
};

// Method chaining
let finalResult = calculator.add(5).multiply(3).add(2).getValue();
console.log(finalResult); // 17

// The 'this' binding can be tricky
let obj = {
    name: "Alice",
    greet() {
        console.log(`Hello, I'm ${this.name}`);
    }
};

obj.greet(); // "Hello, I'm Alice"

// Lost 'this' context
let greetFunction = obj.greet;
greetFunction(); // "Hello, I'm undefined" (in strict mode) or global name

// Solutions: bind, call, apply
let boundGreet = obj.greet.bind(obj);
boundGreet(); // "Hello, I'm Alice"

obj.greet.call(obj);   // "Hello, I'm Alice"
obj.greet.apply(obj);  // "Hello, I'm Alice"

Object Manipulation Techniques

// Object.keys, Object.values, Object.entries
let book = {
    title: "JavaScript: The Good Parts",
    author: "Douglas Crockford",
    year: 2008,
    pages: 172
};

console.log(Object.keys(book));   // ["title", "author", "year", "pages"]
console.log(Object.values(book)); // ["JavaScript: The Good Parts", "Douglas Crockford", 2008, 172]
console.log(Object.entries(book)); // [["title", "JavaScript: The Good Parts"], ...]

// Object.assign - shallow copy and merge
let defaults = { theme: "dark", language: "en" };
let userPrefs = { theme: "light", fontSize: 14 };
let settings = Object.assign({}, defaults, userPrefs);
console.log(settings); // { theme: "light", language: "en", fontSize: 14 }

// Spread operator with objects (ES6+)
let newSettings = { ...defaults, ...userPrefs, autoSave: true };
console.log(newSettings); // { theme: "light", language: "en", fontSize: 14, autoSave: true }

// Property descriptors
Object.defineProperty(book, 'isbn', {
    value: '978-0596517748',
    writable: false,     // Can't be changed
    enumerable: true,    // Shows up in for...in loops
    configurable: false  // Can't be deleted or redefined
});

// Check if property exists
console.log('title' in book);              // true
console.log(book.hasOwnProperty('title')); // true
console.log('toString' in book);           // true (inherited)
console.log(book.hasOwnProperty('toString')); // false (inherited)

Chapter 8: The Scope and Closure Mysteries

In JavaScript Land, understanding scope and closures is like learning the ancient magic that governs how variables are accessed and remembered.

The Scope Hierarchy

// Global scope - visible everywhere
var globalVar = "I'm global!";
let globalLet = "I'm also global!";

function outerFunction(param) {
    // Function scope - visible within this function and nested functions
    var functionScoped = "I'm function scoped";
    let blockScoped = "I'm block scoped";
    
    console.log(globalVar);    // ✅ Can access global
    console.log(param);        // ✅ Can access parameters
    
    if (true) {
        // Block scope - only visible within this block for let/const
        var functionScopedVar = "var ignores blocks";
        let blockScopedLet = "let respects blocks";
        const blockScopedConst = "const also respects blocks";
        
        console.log(functionScoped);   // ✅ Can access function scope
        console.log(blockScoped);      // ✅ Can access outer block scope
    }
    
    console.log(functionScopedVar);   // ✅ var leaked out of block
    // console.log(blockScopedLet);   // ❌ ReferenceError - let stayed in block
    // console.log(blockScopedConst); // ❌ ReferenceError - const stayed in block
    
    function innerFunction() {
        console.log(functionScoped);  // ✅ Can access outer function scope
        console.log(globalVar);       // ✅ Can access global scope
        
        let innerVar = "I'm inner";
        // This creates a closure!
    }
    
    return innerFunction;
}

// console.log(functionScoped); // ❌ ReferenceError - can't access function scope from global

The Closure Chronicles

A closure is like a magical backpack that a function carries, containing all the variables from its birth environment.

// Classic closure example
function createCounter() {
    let count = 0; // This variable is "closed over"
    
    return function() {
        count++; // The inner function remembers 'count'
        return count;
    };
}

let counter1 = createCounter();
let counter2 = createCounter(); // Each gets its own 'count'

console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter2()); // 1 (independent counter)
console.log(counter1()); // 3

// More complex closure - a function factory
function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier; // 'multiplier' is closed over
    };
}

let double = createMultiplier(2);
let triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

// Practical closure example - private variables
function createBankAccount(initialBalance) {
    let balance = initialBalance; // Private variable
    
    return {
        deposit(amount) {
            if (amount > 0) {
                balance += amount;
                return balance;
            }
            throw new Error("Deposit amount must be positive");
        },
        
        withdraw(amount) {
            if (amount > 0 && amount <= balance) {
                balance -= amount;
                return balance;
            }
            throw new Error("Invalid withdrawal amount");
        },
        
        getBalance() {
            return balance;
        }
        
        // No direct access to 'balance' from outside!
    };
}

let account = createBankAccount(100);
console.log(account.getBalance()); // 100
account.deposit(50);
console.log(account.getBalance()); // 150
// console.log(account.balance);   // undefined - truly private!

The Dreaded Loop Closure Problem

// Common mistake with closures in loops
console.log("❌ Broken version:");
for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // Prints 3, 3, 3 - why?
    }, 100);
}
// By the time setTimeout executes, the loop has finished and i = 3

// Solution 1: Use let instead of var
console.log("✅ Fixed with let:");
for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // Prints 0, 1, 2 - each iteration gets its own 'i'
    }, 100);
}

// Solution 2: Create a closure with IIFE (Immediately Invoked Function Expression)
console.log("✅ Fixed with IIFE:");
for (var i = 0; i < 3; i++) {
    (function(index) {
        setTimeout(function() {
            console.log(index); // Prints 0, 1, 2
        }, 100);
    })(i); // Pass current value of i to the IIFE
}

// Solution 3: Use bind
console.log("✅ Fixed with bind:");
for (var i = 0; i < 3; i++) {
    setTimeout(function(index) {
        console.log(index); // Prints 0, 1, 2
    }.bind(null, i), 100);
}

Chapter 9: The Hoisting Phenomenon

Hoisting is one of JavaScript's most misunderstood concepts. Think of it as JavaScript's way of "preparing" your code before execution.

The Hoisting Hierarchy

// What you write:
console.log(hoistedVar);    // undefined (not an error!)
console.log(hoistedFunc());  // "Hello from hoisted function!"
// console.log(notHoistedLet); // ReferenceError: Cannot access before initialization
// console.log(notHoistedConst); // ReferenceError: Cannot access before initialization

var hoistedVar = "I'm hoisted!";

function hoistedFunc() {
    return "Hello from hoisted function!";
}

let notHoistedLet = "I'm in TDZ until this line";
const notHoistedConst = "I'm also in TDZ";

// What JavaScript actually does (conceptually):
var hoistedVar; // Hoisted and initialized with undefined

function hoistedFunc() { // Completely hoisted
    return "Hello from hoisted function!";
}

// let and const are hoisted but not initialized (TDZ)

console.log(hoistedVar);    // undefined
console.log(hoistedFunc()); // "Hello from hoisted function!"

hoistedVar = "I'm hoisted!";
let notHoistedLet = "I'm in TDZ until this line";
const notHoistedConst = "I'm also in TDZ";

Function Hoisting vs Function Expression Hoisting

// Function declaration - fully hoisted
console.log(declaredFunction()); // "I'm declared!" - works!

function declaredFunction() {
    return "I'm declared!";
}

// Function expression - only variable is hoisted
console.log(typeof expressedFunction); // "undefined"
// console.log(expressedFunction());    // TypeError: expressedFunction is not a function

var expressedFunction = function() {
    return "I'm expressed!";
};

// Arrow function - same as function expression
// console.log(arrowFunction());        // TypeError: arrowFunction is not a function
var arrowFunction = () => "I'm an arrow!";

// With let/const - even worse!
// console.log(letFunction());          // ReferenceError: Cannot access before initialization
let letFunction = function() {
    return "I'm let!";
};

The Temporal Dead Zone (TDZ) in Detail

console.log("Starting execution");

// TDZ starts here for 'letVar' and 'constVar'
console.log(typeof letVar);   // ReferenceError - TDZ violation
console.log(typeof constVar); // ReferenceError - TDZ violation

let letVar = "Now I'm alive!";
const constVar = "Me too!";
// TDZ ends here

// Interesting TDZ behavior
function tdz_example() {
    console.log(typeof x); // "undefined" - x doesn't exist yet
    
    if (true) {
        // TDZ for 'x' starts here
        console.log(typeof x); // ReferenceError - x is in TDZ
        let x = "I'm block scoped";
        // TDZ for 'x' ends here
    }
}

Chapter 10: The Asynchronous Adventures

JavaScript Land operates on a single thread, but it has clever ways to handle time-consuming tasks without blocking the main road of execution.

The Event Loop - The Great Coordinator

console.log("1. First");

setTimeout(() => {
    console.log("4. Timeout"); // Macrotask - goes to macrotask queue
}, 0);

Promise.resolve().then(() => {
    console.log("3. Promise"); // Microtask - goes to microtask queue
});

console.log("2. Second");

// Output: 1. First → 2. Second → 3. Promise → 4. Timeout
// Microtasks (promises) have higher priority than macrotasks (setTimeout)

Callbacks - The Original Async Pattern

// Simple callback
function fetchUserData(userId, callback) {
    setTimeout(() => {
        const userData = { id: userId, name: "Alice", email: "alice@example.com" };
        callback(null, userData); // First param is error, second is data
    }, 1000);
}

fetchUserData(123, (error, user) => {
    if (error) {
        console.error("Error:", error);
    } else {
        console.log("User:", user);
    }
});

// Callback Hell - the pyramid of doom
fetchUserData(123, (error, user) => {
    if (error) {
        console.error(error);
    } else {
        fetchUserPosts(user.id, (error, posts) => {
            if (error) {
                console.error(error);
            } else {
                fetchPostComments(posts[0].id, (error, comments) => {
                    if (error) {
                        console.error(error);
                    } else {
                        console.log("Comments:", comments);
                        // This nesting can go on forever... 😱
                    }
                });
            }
        });
    }
});

Promises - The Hope Bringers

// Creating a promise
function fetchData(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (url.includes("valid")) {
                resolve({ data: "Here's your data!", url });
            } else {
                reject(new Error("Invalid URL"));
            }
        }, 1000);
    });
}

// Using promises
fetchData("https://valid-api.com")
    .then(result => {
        console.log("Success:", result);
        return fetchData("https://another-valid-api.com"); // Chain another promise
    })
    .then(result => {
        console.log("Second success:", result);
    })
    .catch(error => {
        console.error("Error:", error.message);
    })
    .finally(() => {
        console.log("Cleanup actions here");
    });

// Promise methods for handling multiple promises
const promise1 = fetchData("https://valid-api1.com");
const promise2 = fetchData("https://valid-api2.com");
const promise3 = fetchData("https://valid-api3.com");

// Wait for all to complete (fails if any fail)
Promise.all([promise1, promise2, promise3])
    .then(results => {
        console.log("All succeeded:", results);
    })
    .catch(error => {
        console.error("At least one failed:", error);
    });

// Wait for first to complete
Promise.race([promise1, promise2, promise3])
    .then(result => {
        console.log("First to finish:", result);
    });

// Wait for all to settle (succeed or fail)
Promise.allSettled([promise1, promise2, promise3])
    .then(results => {
        results.forEach((result, index) => {
            if (result.status === 'fulfilled') {
                console.log(`Promise ${index + 1} succeeded:`, result.value);
            } else {
                console.log(`Promise ${index + 1} failed:`, result.reason);
            }
        });
    });

Async/Await - The Syntactic Sugar Heroes

// Converting promise chains to async/await
async function fetchUserProfile(userId) {
    try {
        console.log("Fetching user data...");
        const user = await fetchUserData(userId);
        
        console.log("Fetching user posts...");
        const posts = await fetchUserPosts(user.id);
        
        console.log("Fetching post comments...");
        const comments = await fetchPostComments(posts[0].id);
        
        return {
            user,
            posts,
            comments
        };
    } catch (error) {
        console.error("Something went wrong:", error);
        throw error; // Re-throw if you want calling code to handle it
    }
}

// Using async function
fetchUserProfile(123)
    .then(profile => {
        console.log("Complete profile:", profile);
    })
    .catch(error => {
        console.error("Profile fetch failed:", error);
    });

// Async/await with Promise.all for parallel execution
async function fetchMultipleUsers(userIds) {
    try {
        // These run in parallel, not sequentially
        const userPromises = userIds.map(id => fetchUserData(id));
        const users = await Promise.all(userPromises);
        
        console.log("All users:", users);
        return users;
    } catch (error) {
        console.error("Failed to fetch users:", error);
        throw error;
    }
}

// Sequential vs Parallel execution
async function sequentialFetch() {
    console.time("Sequential");
    const user1 = await fetchUserData(1); // Wait 1 second
    const user2 = await fetchUserData(2); // Wait another 1 second
    const user3 = await fetchUserData(3); // Wait another 1 second
    console.timeEnd("Sequential"); // ~3 seconds total
    
    return [user1, user2, user3];
}

async function parallelFetch() {
    console.time("Parallel");
    const [user1, user2, user3] = await Promise.all([
        fetchUserData(1), // All start at the same time
        fetchUserData(2),
        fetchUserData(3)
    ]);
    console.timeEnd("Parallel"); // ~1 second total
    
    return [user1, user2, user3];
}

Chapter 11: The Prototype and Inheritance Saga

In JavaScript Land, objects can inherit from other objects through a mysterious chain called the prototype chain.

Understanding Prototypes

// Every function has a prototype property
function Hero(name, power) {
    this.name = name;
    this.power = power;
}

// Add methods to the prototype
Hero.prototype.introduce = function() {
    return `I am ${this.name}, and I have ${this.power}!`;
};

Hero.prototype.fight = function(villain) {
    return `${this.name} fights ${villain} using ${this.power}!`;
};

// Create instances
const superman = new Hero("Superman", "super strength");
const batman = new Hero("Batman", "intellect and gadgets");

console.log(superman.introduce()); // "I am Superman, and I have super strength!"
console.log(batman.fight("Joker")); // "Batman fights Joker using intellect and gadgets!"

// All instances share the same methods
console.log(superman.introduce === batman.introduce); // true

// The prototype chain in action
console.log(superman.hasOwnProperty("name"));      // true (own property)
console.log(superman.hasOwnProperty("introduce")); // false (inherited)
console.log("introduce" in superman);              // true (found in chain)

The Prototype Chain

// Every object has a __proto__ property pointing to its prototype
console.log(superman.__proto__ === Hero.prototype);           // true
console.log(Hero.prototype.__proto__ === Object.prototype);   // true
console.log(Object.prototype.__proto__);                      // null (end of chain)

// Property lookup walks up the chain
const obj = {
    name: "Test"
};

console.log(obj.toString()); // Found in Object.prototype
console.log(obj.hasOwnProperty("name")); // Found in Object.prototype
// console.log(obj.nonExistent); // undefined (not found anywhere in chain)

// Prototype pollution (be careful!)
Object.prototype.hackedMethod = function() {
    return "I shouldn't be here!";
};

console.log(superman.hackedMethod()); // "I shouldn't be here!" 
// Every object now has this method!

delete Object.prototype.hackedMethod; // Clean up

Classical Inheritance Patterns

// Constructor inheritance
function Superhero(name, power, secretIdentity) {
    Hero.call(this, name, power); // Call parent constructor
    this.secretIdentity = secretIdentity;
}

// Set up prototype inheritance
Superhero.prototype = Object.create(Hero.prototype);
Superhero.prototype.constructor = Superhero;

// Add specialized methods
Superhero.prototype.revealIdentity = function() {
    return `My secret identity is ${this.secretIdentity}!`;
};

// Override parent method
Superhero.prototype.introduce = function() {
    return Hero.prototype.introduce.call(this) + " I'm a superhero!";
};

const spiderman = new Superhero("Spider-Man", "web-slinging", "Peter Parker");
console.log(spiderman.introduce());     // Calls overridden method
console.log(spiderman.revealIdentity()); // "My secret identity is Peter Parker!"
console.log(spiderman.fight("Green Goblin")); // Inherited from Hero

Modern Class Syntax (ES6+)

// Classes are just syntactic sugar over prototypes
class ModernHero {
    constructor(name, power) {
        this.name = name;
        this.power = power;
    }
    
    introduce() {
        return `I am ${this.name}, and I have ${this.power}!`;
    }
    
    fight(villain) {
        return `${this.name} fights ${villain} using ${this.power}!`;
    }
    
    // Static methods belong to the class, not instances
    static compareHeroes(hero1, hero2) {
        return `${hero1.name} vs ${hero2.name}`;
    }
}

// Inheritance with extends
class ModernSuperhero extends ModernHero {
    constructor(name, power, secretIdentity) {
        super(name, power); // Call parent constructor
        this.secretIdentity = secretIdentity;
    }
    
    revealIdentity() {
        return `My secret identity is ${this.secretIdentity}!`;
    }
    
    // Override parent method
    introduce() {
        return super.introduce() + " I'm a superhero!";
    }
    
    // Getter and setter
    get identity() {
        return this.secretIdentity;
    }
    
    set identity(newIdentity) {
        this.secretIdentity = newIdentity;
    }
}

const modernSpiderman = new ModernSuperhero("Spider-Man", "web-slinging", "Peter Parker");
console.log(modernSpiderman.introduce());
console.log(modernSpiderman.identity); // Using getter
modernSpiderman.identity = "Miles Morales"; // Using setter

// Static method usage
console.log(ModernHero.compareHeroes(superman, modernSpiderman));

Chapter 12: Advanced Concepts and Modern Features

Destructuring Deep Dive

// Advanced array destructuring
const matrix = [[1, 2], [3, 4], [5, 6]];
const [[a, b], [c, d]] = matrix;
console.log(a, b, c, d); // 1 2 3 4

// Swapping variables
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1

// Function parameter destructuring
function processUser({ name, age, email = "No email" }) {
    console.log(`${name} (${age}) - ${email}`);
}

processUser({ name: "Alice", age: 30 }); // Alice (30) - No email

// Mixed destructuring
const response = {
    data: {
        users: [
            { id: 1, name: "Alice" },
            { id: 2, name: "Bob" }
        ]
    },
    status: 200
};

const { data: { users: [firstUser, secondUser] }, status } = response;
console.log(firstUser.name, status); // Alice 200

Template Literals and Tagged Templates

// Basic template literals
const name = "Alice";
const age = 30;
const message = `Hello, my name is ${name} and I'm ${age} years old.`;

// Multi-line strings
const html = `
    <div class="user">
        <h2>${name}</h2>
        <p>Age: ${age}</p>
    </div>
`;

// Tagged template literals
function highlight(strings, ...values) {
    return strings.reduce((result, string, i) => {
        const value = values[i] ? `<mark>${values[i]}</mark>` : '';
        return result + string + value;
    }, '');
}

const highlighted = highlight`My name is ${name} and I'm ${age} years old.`;
console.log(highlighted); // My name is <mark>Alice</mark> and I'm <mark>30</mark> years old.

Modules (ES6)

// math.js - exporting
export const PI = 3.14159;
export const E = 2.71828;

export function add(a, b) {
    return a + b;
}

export function multiply(a, b) {
    return a * b;
}

// Default export
export default function subtract(a, b) {
    return a - b;
}

// main.js - importing
import subtract, { PI, add, multiply as mult } from './math.js';
import * as math from './math.js';

console.log(add(5, 3));        // 8
console.log(mult(5, 3));       // 15
console.log(subtract(5, 3));   // 2
console.log(math.PI);          // 3.14159

Symbols and Iterators

// Symbols for unique object keys
const SECRET_PROP = Symbol('secret');
const user = {
    name: "Alice",
    [SECRET_PROP]: "Hidden value"
};

console.log(user[SECRET_PROP]); // "Hidden value"
console.log(Object.keys(user)); // ["name"] - symbol keys are hidden

// Well-known symbols
const customIterable = {
    data: [1, 2, 3, 4, 5],
    
    [Symbol.iterator]() {
        let index = 0;
        const data = this.data;
        
        return {
            next() {
                if (index < data.length) {
                    return { value: data[index++], done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

// Now it's iterable!
for (const value of customIterable) {
    console.log(value); // 1, 2, 3, 4, 5
}

Generators

// Generator functions
function* numberGenerator() {
    yield 1;
    yield 2;
    yield 3;
    return "done";
}

const gen = numberGenerator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: "done", done: true }

// Infinite generator
function* fibonacci() {
    let a = 0, b = 1;
    while (true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3

// Generator with parameters
function* paramGenerator() {
    const x = yield "Give me a number";
    const y = yield `You gave me ${x}, give me another`;
    return `Sum is ${x + y}`;
}

const paramGen = paramGenerator();
console.log(paramGen.next());      // { value: "Give me a number", done: false }
console.log(paramGen.next(5));     // { value: "You gave me 5, give me another", done: false }
console.log(paramGen.next(10));    // { value: "Sum is 15", done: true }

Chapter 13: The Interview Gauntlet - Common Tricks and Gotchas

Type Coercion Mysteries

// The infamous equality comparisons
console.log([] == ![]); // true (wat?!)
// Explanation:
// [] == ![]
// [] == false (! converts [] to false)
// "" == false ([] converts to "")
// 0 == false ("" converts to 0)
// true (0 == 0)

console.log([] + []);     // "" (empty string)
console.log({} + []);     // 0 (in some contexts)
console.log([] + {});     // "[object Object]"
console.log({} + {});     // "[object Object][object Object]"

// Truthy/falsy gotchas
console.log(Boolean([]));       // true (empty array is truthy!)
console.log(Boolean({}));       // true (empty object is truthy!)
console.log(Boolean(""));       // false
console.log(Boolean("0"));      // true (string "0" is truthy!)
console.log(Boolean(0));        // false
console.log(Boolean(NaN));      // false

// typeof surprises
console.log(typeof null);           // "object" (historical bug)
console.log(typeof undefined);      // "undefined"
console.log(typeof []);             // "object"
console.log(typeof function(){});   // "function"
console.log(typeof NaN);            // "number"

The this Binding Puzzle

// Global context
function globalFunction() {
    console.log(this); // Window (browser) or global (Node.js) in non-strict mode
}

// Object method
const obj = {
    name: "Alice",
    greet: function() {
        console.log(this.name); // "Alice"
        
        // Nested function loses context
        function inner() {
            console.log(this.name); // undefined (this is global/undefined)
        }
        inner();
        
        // Arrow function preserves context
        const arrowInner = () => {
            console.log(this.name); // "Alice"
        };
        arrowInner();
    }
};

// Call, apply, bind
function introduce(greeting, punctuation) {
    return `${greeting}, I'm ${this.name}${punctuation}`;
}

const person = { name: "Bob" };

console.log(introduce.call(person, "Hello", "!"));    // "Hello, I'm Bob!"
console.log(introduce.apply(person, ["Hi", "."]));    // "Hi, I'm Bob."

const boundIntroduce = introduce.bind(person, "Hey");
console.log(boundIntroduce("?"));                      // "Hey, I'm Bob?"

Event Loop and Microtask Queue

console.log("1");

setTimeout(() => console.log("2"), 0);

Promise.resolve().then(() => console.log("3"));

Promise.resolve().then(() => {
    console.log("4");
    setTimeout(() => console.log("5"), 0);
});

setTimeout(() => console.log("6"), 0);

console.log("7");

// Output: 1, 7, 3, 4, 2, 6, 5
// Explanation:
// 1. Synchronous code runs first: 1, 7
// 2. Microtasks (Promises) run next: 3, 4
// 3. Macrotasks (setTimeout) run last: 2, 6, 5

Variable Hoisting Edge Cases

// Function vs variable hoisting precedence
console.log(typeof foo); // "function"

var foo = "I'm a variable";

function foo() {
    return "I'm a function";
}

console.log(typeof foo); // "string"

// Explanation: Function declarations are hoisted before variable declarations
// But variable assignments happen in order

// Temporal Dead Zone gotcha
function tdz() {
    console.log(typeof x); // "undefined" - x doesn't exist yet
    
    if (true) {
        console.log(typeof x); // ReferenceError - x is in TDZ here
        let x = "I'm block scoped";
    }
}

Closure Memory Leaks

// Memory leak example
function createLeak() {
    const hugeArray = new Array(1000000).fill("data");
    
    return function() {
        // This closure keeps the entire hugeArray in memory
        // even though it doesn't use it
        return "I'm a small function";
    };
}

// Better approach
function createNoLeak() {
    const hugeArray = new Array(1000000).fill("data");
    const summary = hugeArray.length; // Extract what you need
    
    return function() {
        return `Array had ${summary} elements`;
    };
}

Chapter 14: Modern JavaScript Features (ES6+)

Destructuring with Default Values and Renaming

// Complex destructuring scenarios
const config = {
    api: {
        baseUrl: "https://api.example.com",
        timeout: 5000
    },
    features: {
        darkMode: true
    }
};

// Nested destructuring with defaults and renaming
const {
    api: { 
        baseUrl: apiUrl = "https://default.com",
        timeout = 3000,
        retries = 3 // Not in original object
    },
    features: { 
        darkMode = false,
        notifications: enableNotifications = true 
    } = {} // Default to empty object if features is undefined
} = config;

console.log(apiUrl, timeout, retries, darkMode, enableNotifications);

Advanced Array Methods

const users = [
    { id: 1, name: "Alice", age: 25, active: true },
    { id: 2, name: "Bob", age: 30, active: false },
    { id: 3, name: "Charlie", age: 35, active: true },
    { id: 4, name: "Diana", age: 28, active: true }
];

// Chaining array methods
const result = users
    .filter(user => user.active)                    // Only active users
    .map(user => ({ ...user, ageGroup: user.age < 30 ? 'young' : 'mature' }))
    .sort((a, b) => a.age - b.age)                  // Sort by age
    .reduce((acc, user) => {                        // Group by age group
        const group = user.ageGroup;
        acc[group] = acc[group] || [];
        acc[group].push(user);
        return acc;
    }, {});

console.log(result);

// flatMap - map and flatten in one step
const nested = [[1, 2], [3, 4], [5, 6]];
const flattened = nested.flatMap(arr => arr.map(x => x * 2));
console.log(flattened); // [2, 4, 6, 8, 10, 12]

// Array.from with mapping function
const range = Array.from({ length: 5 }, (_, i) => i * 2);
console.log(range); // [0, 2, 4, 6, 8]

Proxy and Reflect

// Proxy - intercept and customize operations
const user = {
    name: "Alice",
    age: 30
};

const userProxy = new Proxy(user, {
    get(target, property) {
        console.log(`Getting ${property}`);
        return target[property];
    },
    
    set(target, property, value) {
        console.log(`Setting ${property} to ${value}`);
        if (property === 'age' && value < 0) {
            throw new Error("Age cannot be negative");
        }
        target[property] = value;
        return true;
    },
    
    has(target, property) {
        console.log(`Checking if ${property} exists`);
        return property in target;
    }
});

console.log(userProxy.name);  // "Getting name" → "Alice"
userProxy.age = 31;           // "Setting age to 31"
console.log('name' in userProxy); // "Checking if name exists" → true

// Reflect - programmatic object operations
const obj = { a: 1, b: 2 };
console.log(Reflect.has(obj, 'a'));           // true
console.log(Reflect.ownKeys(obj));            // ["a", "b"]
Reflect.set(obj, 'c', 3);
console.log(obj);                             // { a: 1, b: 2, c: 3 }

WeakMap and WeakSet

// WeakMap - weak references to objects as keys
const privateData = new WeakMap();

class BankAccount {
    constructor(balance) {
        // Store private data using WeakMap
        privateData.set(this, { balance, transactions: [] });
    }
    
    deposit(amount) {
        const data = privateData.get(this);
        data.balance += amount;
        data.transactions.push(`Deposited ${amount}`);
        return data.balance;
    }
    
    getBalance() {
        return privateData.get(this).balance;
    }
    
    getTransactions() {
        return privateData.get(this).transactions.slice(); // Return copy
    }
}

const account = new BankAccount(100);
console.log(account.getBalance()); // 100
account.deposit(50);
console.log(account.getBalance()); // 150

// Private data is truly private - no way to access it directly
console.log(account.balance); // undefined

// WeakSet - weak references to objects
const visitedNodes = new WeakSet();

function traverse(node) {
    if (visitedNodes.has(node)) {
        return; // Avoid cycles
    }
    
    visitedNodes.add(node);
    // Process node...
    
    if (node.children) {
        node.children.forEach(child => traverse(child));
    }
}

Optional Chaining and Nullish Coalescing

// Optional chaining (?.) - safely access nested properties
const user = {
    profile: {
        social: {
            twitter: "@alice"
        }
    }
};

// Traditional way (verbose and error-prone)
const twitter1 = user && user.profile && user.profile.social && user.profile.social.twitter;

// Optional chaining (clean and safe)
const twitter2 = user?.profile?.social?.twitter;
const instagram = user?.profile?.social?.instagram; // undefined (no error)

// Works with arrays and function calls too
const firstHobby = user?.hobbies?.[0];
const result = user?.getName?.();

// Nullish coalescing (??) - default values for null/undefined
const username = user?.name ?? "Anonymous";
const theme = user?.preferences?.theme ?? "light";

// Different from || operator
console.log("" || "default");  // "default" (empty string is falsy)
console.log("" ?? "default");  // "" (empty string is not nullish)
console.log(null ?? "default"); // "default"
console.log(undefined ?? "default"); // "default"

Dynamic Imports and Top-level Await

// Dynamic imports - load modules conditionally
async function loadModule(condition) {
    if (condition) {
        const module = await import('./heavy-module.js');
        return module.default();
    }
}

// Top-level await (in modules)
// utils.js
const data = await fetch('https://api.example.com/data').then(r => r.json());
export { data };

// Code splitting with dynamic imports
const LazyComponent = lazy(() => import('./LazyComponent'));

Chapter 15: Performance and Best Practices

Memory Management and Performance

// Avoid memory leaks
class EventManager {
    constructor() {
        this.listeners = new Map();
    }
    
    addEventListener(element, event, handler) {
        // Store references for cleanup
        if (!this.listeners.has(element)) {
            this.listeners.set(element, new Map());
        }
        this.listeners.get(element).set(event, handler);
        element.addEventListener(event, handler);
    }
    
    removeEventListener(element, event) {
        const elementListeners = this.listeners.get(element);
        if (elementListeners) {
            const handler = elementListeners.get(event);
            if (handler) {
                element.removeEventListener(event, handler);
                elementListeners.delete(event);
            }
        }
    }
    
    cleanup() {
        // Clean up all listeners
        for (const [element, events] of this.listeners) {
            for (const [event, handler] of events) {
                element.removeEventListener(event, handler);
            }
        }
        this.listeners.clear();
    }
}

// Debouncing and throttling
function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// Usage examples
const debouncedSearch = debounce((query) => {
    console.log(`Searching for: ${query}`);
}, 300);

const throttledScroll = throttle(() => {
    console.log('Scroll event handled');
}, 100);

// Efficient array operations
// ❌ Inefficient - creates new arrays
let numbers = [1, 2, 3, 4, 5];
numbers = numbers.filter(n => n > 2).map(n => n * 2).filter(n => n < 10);

// ✅ More efficient - single pass
numbers = [1, 2, 3, 4, 5].reduce((acc, n) => {
    if (n > 2) {
        const doubled = n * 2;
        if (doubled < 10) {
            acc.push(doubled);
        }
    }
    return acc;
}, []);

Error Handling Best Practices

// Custom error classes
class ValidationError extends Error {
    constructor(message, field) {
        super(message);
        this.name = 'ValidationError';
        this.field = field;
    }
}

class NetworkError extends Error {
    constructor(message, statusCode) {
        super(message);
        this.name = 'NetworkError';
        this.statusCode = statusCode;
    }
}

// Comprehensive error handling
async function processUserData(userData) {
    try {
        // Validation
        if (!userData.email) {
            throw new ValidationError('Email is required', 'email');
        }
        
        if (!userData.email.includes('@')) {
            throw new ValidationError('Invalid email format', 'email');
        }
        
        // API call with timeout
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 5000);
        
        const response = await fetch('/api/users', {
            method: 'POST',
            body: JSON.stringify(userData),
            headers: { 'Content-Type': 'application/json' },
            signal: controller.signal
        });
        
        clearTimeout(timeoutId);
        
        if (!response.ok) {
            throw new NetworkError(
                `HTTP ${response.status}: ${response.statusText}`,
                response.status
            );
        }
        
        return await response.json();
        
    } catch (error) {
        // Handle different error types
        if (error instanceof ValidationError) {
            console.error(`Validation error in ${error.field}: ${error.message}`);
            // Show user-friendly message
        } else if (error instanceof NetworkError) {
            console.error(`Network error (${error.statusCode}): ${error.message}`);
            // Retry logic or fallback
        } else if (error.name === 'AbortError') {
            console.error('Request timed out');
            // Handle timeout
        } else {
            console.error('Unexpected error:', error);
            // Generic error handling
        }
        
        throw error; // Re-throw if calling code needs to handle it
    }
}

// Global error handling
window.addEventListener('error', (event) => {
    console.error('Global error:', event.error);
    // Send to error reporting service
});

window.addEventListener('unhandledrejection', (event) => {
    console.error('Unhandled promise rejection:', event.reason);
    event.preventDefault(); // Prevent default browser behavior
});

Chapter 16: Testing and Debugging

Debugging Techniques

// Console methods beyond console.log
const user = { name: "Alice", age: 30, hobbies: ["reading", "coding"] };

console.table(user); // Display as table
console.group("User Details");
console.log("Name:", user.name);
console.log("Age:", user.age);
console.groupEnd();

console.time("Performance Test");
// Some code to measure
for (let i = 0; i < 1000000; i++) {
    // Do something
}
console.timeEnd("Performance Test");

console.assert(user.age > 18, "User must be an adult");
console.count("Function calls"); // Count how many times this runs

// Debugging with breakpoints in code
function complexFunction(data) {
    debugger; // Execution will pause here when dev tools are open
    
    const processed = data.map(item => {
        // Processing logic
        return item * 2;
    });
    
    return processed;
}

// Stack trace
function a() { b(); }
function b() { c(); }
function c() { console.trace(); }
a(); // Shows the call stack

Unit Testing Examples

// Simple test framework (like Jest/Mocha)
function describe(description, tests) {
    console.log(`\n${description}`);
    tests();
}

function it(description, test) {
    try {
        test();
        console.log(`✅ ${description}`);
    } catch (error) {
        console.log(`❌ ${description}`);
        console.error(error.message);
    }
}

function expect(actual) {
    return {
        toBe(expected) {
            if (actual !== expected) {
                throw new Error(`Expected ${expected}, but got ${actual}`);
            }
        },
        toEqual(expected) {
            if (JSON.stringify(actual) !== JSON.stringify(expected)) {
                throw new Error(`Expected ${JSON.stringify(expected)}, but got ${JSON.stringify(actual)}`);
            }
        },
        toThrow() {
            if (typeof actual !== 'function') {
                throw new Error('Expected a function');
            }
            try {
                actual();
                throw new Error('Expected function to throw');
            } catch (error) {
                // Function threw as expected
            }
        }
    };
}

// Test examples
describe("Calculator Tests", () => {
    const calculator = {
        add: (a, b) => a + b,
        subtract: (a, b) => a - b,
        divide: (a, b) => {
            if (b === 0) throw new Error("Division by zero");
            return a / b;
        }
    };
    
    it("should add two numbers", () => {
        expect(calculator.add(2, 3)).toBe(5);
    });
    
    it("should subtract two numbers", () => {
        expect(calculator.subtract(5, 3)).toBe(2);
    });
    
    it("should throw error when dividing by zero", () => {
        expect(() => calculator.divide(5, 0)).toThrow();
    });
});

// Mocking and stubbing
function createMock() {
    const calls = [];
    const mock = function(...args) {
        calls.push(args);
        return mock.returnValue;
    };
    
    mock.calls = calls;
    mock.returnValue = undefined;
    mock.returns = function(value) {
        this.returnValue = value;
        return this;
    };
    
    return mock;
}

// Usage
const mockCallback = createMock().returns("mocked result");
const result = mockCallback("arg1", "arg2");
console.log(result); // "mocked result"
console.log(mockCallback.calls); // [["arg1", "arg2"]]

Chapter 17: Security Best Practices

XSS Prevention

// ❌ Dangerous - XSS vulnerability
function dangerousRender(userInput) {
    document.innerHTML = `<div>Hello ${userInput}</div>`;
    // If userInput is "<script>alert('XSS')</script>", it will execute!
}

// ✅ Safe - Escape user input
function safeRender(userInput) {
    const escaped = userInput
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#x27;');
    
    document.getElementById('content').innerHTML = `<div>Hello ${escaped}</div>`;
}

// ✅ Even safer - Use textContent
function safestRender(userInput) {
    const div = document.createElement('div');
    div.textContent = `Hello ${userInput}`;
    document.getElementById('content').appendChild(div);
}

// Sanitization library example (like DOMPurify)
function sanitizeHTML(html) {
    // This is a simplified version - use a real library in production
    const allowedTags = ['p', 'br', 'strong', 'em'];
    const allowedAttributes = ['class'];
    
    // Implementation would parse and clean HTML
    return html; // Simplified
}

CSRF Protection

// CSRF token handling
class CSRFProtection {
    constructor() {
        this.token = this.generateToken();
    }
    
    generateToken() {
        return Array.from(crypto.getRandomValues(new Uint8Array(32)))
            .map(b => b.toString(16).padStart(2, '0'))
            .join('');
    }
    
    async makeSecureRequest(url, options = {}) {
        const headers = {
            'Content-Type': 'application/json',
            'X-CSRF-Token': this.token,
            ...options.headers
        };
        
        return fetch(url, {
            ...options,
            headers,
            credentials: 'same-origin' // Include cookies
        });
    }
}

const csrf = new CSRFProtection();

Input Validation

// Comprehensive input validation
class Validator {
    static email(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }
    
    static password(password) {
        // At least 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 special char
        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
        return passwordRegex.test(password);
    }
    
    static sanitizeString(str, maxLength = 255) {
        if (typeof str !== 'string') return '';
        return str.trim().slice(0, maxLength);
    }
    
    static isValidJSON(str) {
        try {
            JSON.parse(str);
            return true;
        } catch {
            return false;
        }
    }
    
    static validateUserData(data) {
        const errors = [];
        
        if (!data.email || !this.email(data.email)) {
            errors.push('Invalid email address');
        }
        
        if (!data.password || !this.password(data.password)) {
            errors.push('Password must be at least 8 characters with mixed case, numbers, and symbols');
        }
        
        if (!data.name || data.name.trim().length < 2) {
            errors.push('Name must be at least 2 characters');
        }
        
        return {
            isValid: errors.length === 0,
            errors,
            sanitized: {
                email: this.sanitizeString(data.email),
                name: this.sanitizeString(data.name),
                // Don't sanitize password - hash it instead
            }
        };
    }
}

Epilogue: The Master's Journey Continues

Congratulations! You've journeyed through the vast lands of JavaScript, from the humble beginnings with variables to the advanced territories of modern features and security. But remember, this is not the end—it's just the beginning of your mastery.

Key Takeaways for Interviews:

Understand the fundamentals deeply: Know how var, let, and const really work, not just their syntax.
Master asynchronous programming: Be comfortable with callbacks, promises, and async/await.
Know the event loop: Understanding how JavaScript executes code will set you apart.
Prototype and inheritance: Even with modern classes, understanding prototypal inheritance is crucial.
Be aware of gotchas: Know about type coercion, this binding, and hoisting edge cases.
Practice problem-solving: Can you implement common algorithms and data structures?
Understand modern features: Destructuring, arrow functions, modules, and other ES6+ features.
Security awareness: Know how to write secure code and avoid common vulnerabilities.

Final Interview Tips:

Think out loud: Explain your reasoning as you solve problems
Ask clarifying questions: Make sure you understand the requirements
Consider edge cases: What happens with invalid input?
Optimize when asked: Know Big O notation and how to improve performance
Test your code: Walk through examples to verify your solution works

The Never-Ending Story:

JavaScript continues to evolve. Stay curious, keep learning, and remember that every expert was once a beginner. The language may have its quirks and "wat" moments, but it's also incredibly powerful and expressive.

Whether you're building the next great web application, working with Node.js on the backend, or even developing mobile apps, the fundamentals you've learned here will serve you well.

Now go forth and code! The JavaScript kingdom awaits your contributions to its ever-growing legend.

"In JavaScript Land, every function tells a story, every object holds secrets, and every closure preserves memories. May your code be bug-free and your callbacks always resolve!"

The End... or is it just the Beginning? 🚀;