2JavaScript Masterclass

2.1 Variables: var, let, const

console.log(a); // undefined (var hoists with undefined)
var a = 1;

console.log(b); // ReferenceError — TDZ
let b = 2;

const obj = { x: 1 };
obj.x = 2;       // OK — mutating contents
obj = {};        // TypeError — can't reassign binding

2.2 Types and coercion

JS has 7 primitives: string, number, bigint, boolean, undefined, null, symbol. Everything else is an object.

typeof "x"        // "string"
typeof 1          // "number"
typeof 1n         // "bigint"
typeof true       // "boolean"
typeof undefined  // "undefined"
typeof null       // "object"   ← legacy bug, can't be fixed
typeof Symbol()   // "symbol"
typeof []         // "object"
typeof function(){} // "function" (still an object underneath)

== vs ===

'5' == 5      // true   (loose, coerces)
'5' === 5     // false  (strict)
null == undefined   // true
null === undefined  // false
NaN == NaN    // false  (NaN never equals NaN)
Number.isNaN(NaN)   // true

Truthy / falsy

Falsy values: false, 0, -0, 0n, '', null, undefined, NaN. Everything else is truthy — including '0', [], {}.

2.3 Scope, hoisting, TDZ

Scope = where a name is visible. Three kinds: global, function, block (let/const). Variables are hoisted to the top of their scope; var initialises to undefined, let/const stay in the Temporal Dead Zone until the declaration line.

// Classic interview trap
for (var i = 0; i < 3; i++) setTimeout(() => console.log(i), 0);
// Output: 3 3 3  — all closures share the SAME var

for (let i = 0; i < 3; i++) setTimeout(() => console.log(i), 0);
// Output: 0 1 2  — let creates a new binding per iteration

2.4 Closures — the most asked concept

A closure is a function bundled with the variables from the scope where it was defined (not where it's called). The function "closes over" those variables.

function makeCounter() {
  let count = 0;
  return () => ++count;     // inner function closes over `count`
}

const c = makeCounter();
c(); // 1
c(); // 2
c(); // 3
// `count` is private — only the returned function can touch it

Practical uses

• Private state (counters, caches, memoisation)
• Partial application: const add = a => b => a + b; const inc = add(1);
• Event handlers that remember context
• Module pattern (pre-ESM)

Memoise example

function memoize(fn) {
  const cache = new Map();          // closed over
  return (...args) => {
    const k = JSON.stringify(args);
    if (cache.has(k)) return cache.get(k);
    const v = fn(...args);
    cache.set(k, v);
    return v;
  };
}
const slowSquare = n => (console.log('compute'), n * n);
const fast = memoize(slowSquare);
fast(4); // compute, 16
fast(4); // 16   (no log — cached)

2.5 The this keyword

this is bound by how a function is called, not where it's defined. Five rules:

1. Default — bare function call: this = undefined (strict mode) or global object.
2. Implicit — method call obj.fn(): this = obj.
3. Explicit — fn.call(thisArg, ...), fn.apply(thisArg, [args]), fn.bind(thisArg).
4. new — new Fn(): this = the new object.
5. Arrow functions — no own this; inherit lexically from enclosing scope.

const obj = {
  name: 'Alice',
  greet() { return `Hi, ${this.name}`; },          // implicit
  greetArrow: () => `Hi, ${this?.name}`,           // arrow — no this binding
};
obj.greet();         // 'Hi, Alice'
obj.greetArrow();    // 'Hi, undefined'  (this is module-level, not obj)

const fn = obj.greet;
fn();                // 'Hi, undefined' — bare call, lost binding
fn.call({ name: 'Bob' }); // 'Hi, Bob'  — explicit

class C { constructor() { this.x = 1; } }
const c = new C();    // this = the new instance

2.6 Prototypes & classes

Every object has a hidden link [[Prototype]] pointing to another object (or null). Property lookup walks the chain.

const proto = { greet() { return 'hi'; } };
const obj = Object.create(proto);
obj.greet();  // 'hi' — not on obj, found on proto

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

class Dog extends Animal {
  speak() { return `${this.name} barks`; }   // override
  bark() { return super.speak() + ' (was bark)'; }
}

new Dog('Rex').speak();   // 'Rex barks'
new Dog('Rex').bark();    // 'Rex makes a sound (was bark)'

Under the hood, class is sugar over prototypes. Dog.prototype.__proto__ === Animal.prototype.

2.7 Event loop — the picture every interview asks for

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');

// Output: 1 4 3 2
// Sync first (1, 4), then microtasks (3), then macrotasks (2)

2.8 Promises & async/await

A Promise has 3 states: pending, fulfilled, rejected. Once settled, never changes.

// Creating
const p = new Promise((resolve, reject) => {
  setTimeout(() => Math.random() > 0.5 ? resolve('ok') : reject(new Error('bad')), 100);
});

// Consuming with .then / .catch
p.then(v => console.log(v)).catch(e => console.error(e)).finally(() => console.log('done'));

// async/await — same thing, nicer syntax
async function run() {
  try {
    const v = await p;
    console.log(v);
  } catch (e) {
    console.error(e);
  }
}

Combinators

Common bug: forgetting await

async function fetchUser(id) { /* ... */ return user; }

// BUG: returns a Promise, not a user
const u = fetchUser(1);
console.log(u.email);   // undefined — u is a Promise

// FIX
const u2 = await fetchUser(1);
console.log(u2.email);  // works

2.9 Modules — CommonJS vs ESM

// math.js
function add(a,b){return a+b}
module.exports = { add };

// app.js
const { add } = require('./math');
add(1,2);

// math.js
export function add(a,b){return a+b}
export default function mul(a,b){return a*b}

// app.js
import mul, { add } from './math.js';
add(1,2);

2.10 Arrays — methods you must know

// Non-mutating
[1,2,3].map(x => x*2);          // [2,4,6]
[1,2,3].filter(x => x > 1);     // [2,3]
[1,2,3].reduce((a,b) => a+b, 0); // 6
[1,2,3].some(x => x > 2);       // true
[1,2,3].every(x => x > 0);      // true
[1,2,3].find(x => x > 1);       // 2
[1,2,3].findIndex(x => x > 1);  // 1
[1,2,3].includes(2);            // true
[1,2,3].flat();                 // [1,2,3]
[[1,2],[3]].flat();             // [1,2,3]
[1,2].concat([3,4]);            // [1,2,3,4]
[...[1,2], ...[3,4]];           // [1,2,3,4]

// Mutating (be careful in functional code)
arr.push(x); arr.pop();
arr.unshift(x); arr.shift();
arr.splice(i, n);
arr.sort();
arr.reverse();

2.11 Objects — destructuring, spread, copy

const user = { name: 'Alice', age: 30, role: 'admin' };

// Destructure with rename + default
const { name, role: r, level = 1 } = user;

// Spread copies SHALLOW
const copy = { ...user, age: 31 };

// Deep copy
const deep = structuredClone(user);
// or JSON round-trip (loses functions, Dates, Maps...)
const deep2 = JSON.parse(JSON.stringify(user));

// Optional chaining + nullish coalescing
const city = user?.address?.city ?? 'Unknown';

2.12 Iterators, generators, symbols

// Generator — pauseable function
function* range(start, end) {
  for (let i = start; i < end; i++) yield i;
}
[...range(0, 5)];        // [0,1,2,3,4]
for (const n of range(0, 3)) console.log(n);

// Symbol — unique key
const s = Symbol('id');
const obj = { [s]: 42 };
obj[s];   // 42 — not iterable in normal for...in

2.13 Common pitfalls (interview gold)

• Reference vs value: objects/arrays passed by reference; primitives by value.
• NaN is not equal to NaN: use Number.isNaN.
• Floating point: 0.1 + 0.2 === 0.3 → false. Use rounding or libraries.
• typeof null === 'object': legacy bug, can't fix.
• Array sort defaults to string: [10,9,1].sort() → [1,10,9]. Always pass comparator.
• for...in vs for...of: in iterates keys (including inherited); of iterates values of iterables.
• Mutating during iteration: don't push into an array you're iterating with forEach.
• Async forEach: arr.forEach(async fn) does NOT await. Use for...of with await, or Promise.all(arr.map(fn)).