JavaScript

// Variables
const PI = 3.14159;          // block-scoped, immutable binding
let count = 0;               // block-scoped, mutable
var legacy = "avoid";        // function-scoped, hoisted

// Types typeof "hello" // "string" typeof 42 // "number" typeof true // "boolean" typeof undefined // "undefined" typeof null // "object" (historical bug) typeof {} // "object" typeof [] // "object" typeof function(){} // "function"

// Destructuring const { name, age, role = "user" } = user; const [first, second, ...rest] = array; const { address: { city } } = nested;

// Spread / Rest const merged = { ...obj1, ...obj2 }; const copy = [...arr1, ...arr2]; function sum(...nums) { return nums.reduce((a, b) => a + b, 0); } ```

// Callbacks (old pattern)
fs.readFile("file.txt", (err, data) => {
  if (err) throw err;
  console.log(data);
});

// Promises fetch("https://api.example.com/data") .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err)) .finally(() => setLoading(false));

// Async/Await (modern) async function loadUser(id) { try { const res = await fetch(/api/users/${id}); if (!res.ok) throw new Error(HTTP ${res.status}); return await res.json(); } catch (error) { console.error("Failed to load user:", error); throw error; } }

// Parallel execution const [users, posts] = await Promise.all([ fetch("/api/users").then(r => r.json()), fetch("/api/posts").then(r => r.json()), ]);

// Promise.allSettled wait for all, don't fail-fast const results = await Promise.allSettled([p1, p2, p3]); ```

// Optional chaining
const city = user?.address?.city ?? "Unknown";

// Nullish coalescing const name = user.name ?? "Anonymous";

// Logical assignment user.name ||= "Guest"; // assign if falsy user.count ??= 0; // assign if nullish user.active &&= isValid(); // assign if truthy

// Array methods const doubled = nums.map(n => n * 2); const evens = nums.filter(n => n % 2 === 0); const sum = nums.reduce((acc, n) => acc + n, 0); const found = nums.find(n => n > 5); const hasLarge = nums.some(n => n > 100); const allPos = nums.every(n => n > 0); const flat = nested.flat(2); const flatMapped = arr.flatMap(x => [x, x * 2]);

// Object methods Object.keys(obj) // array of keys Object.values(obj) // array of values Object.entries(obj) // array of [key, value] pairs Object.fromEntries(entries) // reverse of entries ```

// The Event Loop how JavaScript handles async operations

// Call Stack: currently executing synchronous code // Web APIs: browser APIs (setTimeout, fetch, DOM events) // Callback Queue: ready callbacks from completed async ops // Microtask Queue: Promise callbacks (higher priority than callbacks)

// Order: synchronous → microtasks → macrotasks console.log('1. sync start');

setTimeout(() => console.log('4. setTimeout callback'), 0);

Promise.resolve() .then(() => console.log('2. Promise.then (microtask)')) .then(() => console.log('3. chained .then (microtask)'));

// Output: 1, 2, 3, 4

// ── Execution context example ───────────────────────── async function fetchUser(id) { console.log('A: before await'); const user = await fetch(/users/${id}).then(r => r.json()); console.log('C: after await'); // this runs as a microtask return user; }

console.log('Before call'); fetchUser(1).then(u => console.log('D: got user')); console.log('After call (synchronous, runs before await resumes)'); // Output order: Before call, A, After call, C, D

// ── Web Worker for CPU-intensive tasks ──────────────── // main.js const worker = new Worker('worker.js'); worker.postMessage({ numbers: [1, 2, 3, 4, 5] }); worker.onmessage = (e) => console.log('Sum:', e.data.result);

// worker.js self.onmessage = (e) => { const sum = e.data.numbers.reduce((a, b) => a + b, 0); self.postMessage({ result: sum }); }; ```

// ── Closures ──────────────────────────────────────────
function createCounter(initial = 0) {
    let count = initial;  // private via closure
    return {
        increment: () => ++count,
        decrement: () => --count,
        reset: () => { count = initial; },
        value: () => count,
    };
}

const counter = createCounter(10); counter.increment(); // 11 counter.increment(); // 12 counter.value(); // 12

// Memoization using closures function memoize(fn) { const cache = new Map(); return function(...args) { const key = JSON.stringify(args); if (cache.has(key)) return cache.get(key); const result = fn.apply(this, args); cache.set(key, result); return result; }; }

const expensiveFib = memoize(function fib(n) { return n <= 1 ? n : fib(n - 1) + fib(n - 2); });

// ── Prototype chain ─────────────────────────────────── function Animal(name, sound) { this.name = name; this.sound = sound; } Animal.prototype.speak = function() { return ${this.name} says ${this.sound}; };

function Dog(name) { Animal.call(this, name, 'Woof'); // call super this.tricks = []; } Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; Dog.prototype.learn = function(trick) { this.tricks.push(trick); };

// Modern equivalent using class class Animal2 { constructor(name, sound) { this.name = name; this.sound = sound; } speak() { return ${this.name} says ${this.sound}; } } class Dog2 extends Animal2 { constructor(name) { super(name, 'Woof'); this.tricks = []; } learn(trick) { this.tricks.push(trick); } } ```