JavaScript foundations

01What is JavaScript ch 1 - 01_basic.js

JavaScript is the language of the web - and now also the language Playwright tests are written in. It started in 1995 as a 10-day project by Brendan Eich at Netscape, originally called LiveScript and then Mocha. Today it is a multi-paradigm, dynamically typed, single-threaded language that runs in browsers (Chrome's V8, Firefox's SpiderMonkey, Safari's JavaScriptCore), on servers via Node.js, in serverless edge runtimes, and inside embedded contexts like database functions.

Four facts that define how it behaves

• Dynamically typed - a binding (a name) does not have a type, only the value does. The same name can hold a number now and a string a line later.
• Single-threaded - one call stack, one thread of execution. Concurrency is achieved with the event loop, not OS threads.
• Prototype-based - objects inherit from other objects through a prototype chain. The class keyword is syntactic sugar on top of that.
• First-class functions - a function is a value. You can store it in a variable, pass it as an argument, return it from another function.

flowchart TB
  JS[JavaScript Source] --> B[Browsers]
  JS --> S[Servers]
  JS --> E[Edge / Embedded]
  B --> V8[Chromium - V8]
  B --> SM[Firefox - SpiderMonkey]
  B --> JSC[Safari - JavaScriptCore]
  S --> NODE[Node.js - V8]
  S --> DENO[Deno - V8]
  S --> BUN[Bun - JavaScriptCore]
  E --> CF[Cloudflare Workers]
  E --> VC[Vercel Edge]
  E --> EMBED[Embedded scripting in DBs]

timeline
  title JavaScript family tree
  1995 : LiveScript / Mocha at Netscape
       : Renamed JavaScript
  1997 : ECMAScript 1 standard
  2009 : ES5 - strict mode + JSON
  2015 : ES2015 (ES6) - let, const, class, arrow, modules
  2017 : ES2017 - async / await
  2020 : ES2020 - optional chaining, nullish coalescing, BigInt
  2026 : modern engines fully ship every yearly cut

Tiny first program

Every chapter 1 batch lecture opens with a hello-world. Here is ours, written fresh - notice the four facts in action: no type for name, the function is passed as a value, the call stack is one frame deep.

// hello.js - run with: node hello.js
const greet = (name) => `hello, ${name}!`;

const name = 'tta learner';
console.log(greet(name));
// -> hello, tta learner!

02How the V8 engine works ch 1 - 02_JS_Step_By_Step.js

V8 is Google's JavaScript engine, the one inside Chrome and Node.js. It does not interpret your source line by line - it does something cleverer. The source is parsed once into an abstract syntax tree, the AST is fed to an interpreter called Ignition that emits bytecode, the bytecode runs, and a profiler called the hotness counter watches which functions get called a lot. When a function crosses the hotness threshold, V8 promotes it to TurboFan, an optimising JIT compiler that produces native machine code with type-assumption shortcuts. If those assumptions later fail at runtime, V8 quietly drops back to bytecode - this is called de-optimisation.

flowchart LR
  S[Your .js source] --> P[Parser]
  P --> A[AST - tree of nodes]
  A --> I[Ignition Interpreter]
  I --> B[Bytecode]
  B --> X[Execute one op at a time]
  X --> H{Hot enough?}
  H -- no --> X
  H -- yes --> T[TurboFan JIT]
  T --> M[Optimised machine code]
  M --> CPU[CPU executes natively]
  CPU --> OK{Types still match assumption?}
  OK -- yes --> CPU
  OK -- no --> D[De-optimise -> back to bytecode]
  D --> X

flowchart TB
  subgraph STACK[Stack - tiny + fast - primitives + call frames]
    F1[number, boolean, undefined, null, symbol]
    F2[function call frames - LIFO]
  end
  subgraph HEAP[Heap - big + dynamic - objects + closures]
    H1[Object { ... }]
    H2[Array]
    H3[Function with closure]
    H4[String - unless small]
  end
  STACK -.references.-> HEAP

Hot-loop demo - watching JIT promote a function

The upstream 04_hot_code.js file demos a tight loop that gets optimised after a few thousand calls. Here is our version, original code, illustrating the same idea. Run with node --trace-opt --trace-deopt hot.js and watch V8 print the promotion line.

// hot.js - same function called ~50k times
function square(x) {
  return x * x;
}

let total = 0;
for (let i = 0; i < 50_000; i++) {
  total += square(i);
}

console.log('total =', total);
// node --trace-opt hot.js
// you will see something like: [marking ... for optimisation]

flowchart TD
  CALL[function called many times] --> IC[Inline Cache observes types]
  IC --> MONO{always same shape?}
  MONO -- yes --> MONOMORPH[monomorphic - fast inline]
  MONO -- no --> POLY{2 or 3 shapes?}
  POLY -- yes --> POLYMORPH[polymorphic - small dispatch]
  POLY -- no --> MEGA[megamorphic - de-opt path]

03Runtime + setup ch 1 - 03_verify_setup.js

Before any of this matters, you need a runtime. For Playwright tests we use Node.js - specifically an LTS version (long-term support), currently Node 20 or Node 22. The Node installer ships node (the runtime), npm (the package manager), and npx (a runner for one-off tools). On Windows we recommend the official installer; on macOS use brew install node; on Linux use nvm so multiple versions can coexist.

flowchart LR
  A[Download Node LTS] --> B[Run installer]
  B --> C[node -v]
  C --> D[npm -v]
  D --> E[npx -v]
  E --> F[node -e \"console.log('ok')\"]
  F --> G[Ready to run Playwright]

The verify-setup snippet

A one-file sanity check, original code. Save as verify.js and run with node verify.js. Confirms the version, the global name, and that process is available.

// verify.js - quick environment probe
console.log('node version :', process.version);
console.log('platform     :', process.platform);
console.log('global name  :', typeof window === 'undefined' ? 'globalThis (node)' : 'window (browser)');
console.log('cwd          :', process.cwd());
console.log('argv         :', process.argv.slice(2));
// run: node verify.js hello world
// argv -> ['hello', 'world']

Two flavours of global - quick

Browser code reaches for window. Node code reaches for global or the modern alias globalThis. The latter is the one you should learn first - it works in both environments and is the recommended modern path.

// global.js - same name in any runtime
globalThis.TTA = { batch: 'playwright-2026' };
console.log(globalThis.TTA.batch);
// works in node AND in a browser tab

flowchart TB
  ROOT[globalThis - same name everywhere]
  ROOT --> B[in browser: window, document, fetch]
  ROOT --> N[in node: process, Buffer, require]
  ROOT --> W[in worker: self, postMessage]
  ROOT --> D[in deno: Deno, fetch]

04Comments + identifiers ch 2 - 05_Core_Comments, 06_Identifier

Comments and identifiers are the smallest building blocks - the things you write before you ever reach a keyword. JavaScript has two comment forms: single-line // and block /* ... */. There is also a third pseudo-comment - the JSDoc tag, written as /** ... */ - which TypeScript and editors read for type hints. Identifiers are the names you give to variables, functions, classes, and properties.

Comment forms

// single-line - run to end of line
const sku = 'tta-001'; // trailing comment also works

/*
   block comment - spans
   multiple lines, can wrap
   a paragraph of intent
*/
const price = 199;

/**
 * JSDoc - typed comment for IDEs
 * @param {string} name - learner name
 * @returns {string} greeting
 */
function hi(name) { return `hi ${name}`; }

flowchart LR
  C[a source character] --> T{// or /*}
  T -- // --> LINE[single-line comment - to end of line]
  T -- /* --> BLOCK[block comment - until first close */]
  T -- /** --> DOC[JSDoc - TS / editor reads it for hints]
  T -- none --> CODE[real code - parsed normally]

Identifier rules - what is a legal name

An identifier may start with a letter, an underscore, or a dollar sign. After the first character, digits are also allowed. Names are case-sensitive (price and Price are different). Reserved words cannot be used as identifiers - things like let, class, return, function.

Reserved words you cannot use

A short list of keywords that the parser owns and you cannot reuse as identifiers:

05var vs let vs const ch 2 - 07_var_let_const, 08_Lab, 15_let_block, 18_const

Three ways to declare a binding. Picking the wrong one is the most common chapter-2 bug. The short answer: default to const, fall back to let when you need to reassign, never use var in new code. The long answer is the table below - and the diagrams next to it explain why this matters for tests.

Side-by-side comparison

flowchart LR
  subgraph FN[function scope - var]
    V1[var x inside function visible everywhere in fn]
    V2[var inside if/for STILL visible in fn]
  end
  subgraph BL[block scope - let / const]
    L1[let / const inside { } visible only in that block]
    L2[lifetime ends at closing brace]
  end
  V1 -.style.-> LEAK[often leaks unexpectedly]
  L1 -.style.-> TIGHT[predictable lifetimes]

One program per keyword

// var - leaks out of any block except function
function main() {
  if (true) {
    var teamSize = 12;
  }
  console.log(teamSize); // 12 - var is function-scoped, not block
}
main();

// let - trapped inside the nearest { } block
function main() {
  if (true) {
    let teamSize = 12;
    console.log(teamSize); // 12 - visible here
  }
  // console.log(teamSize); // ReferenceError: not defined
}
main();

// const - binding cannot be reassigned, but contents can mutate
const limit = 100;
// limit = 200;  // TypeError: Assignment to constant variable

const queue = [1, 2];
queue.push(3);    // OK - mutating the array, not the binding
console.log(queue); // [1, 2, 3]

// queue = [];   // TypeError - rebinding the name is what's blocked

The classic loop closure trap

Old JavaScript courses still teach this puzzle: a for loop with var + setTimeout prints the wrong number. With let, the same loop prints what you would expect - because let creates a fresh binding per iteration.

// with var - prints 3, 3, 3
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 10);
}

// with let - prints 0, 1, 2
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 10);
}

sequenceDiagram
  participant Loop as for loop
  participant Q as Macrotask queue
  Loop->>Loop: i=0 - schedule cb that reads i later
  Loop->>Loop: i=1 - schedule another cb
  Loop->>Loop: i=2 - schedule another cb
  Loop->>Loop: loop ends, i is now 3
  Q->>Q: cb1 fires, reads outer i -> 3
  Q->>Q: cb2 fires, reads outer i -> 3
  Q->>Q: cb3 fires, reads outer i -> 3

06Hoisting - deep dive ch 2 - 09 to 16 hoisting variants

Hoisting is the most-asked-about feature of chapter 2, and the one that confuses students for the longest time. The good news: there is one mental model that explains every variant. The bad news: that model needs you to think in two passes. Once it clicks, every hoisting puzzle becomes mechanical.

The two-pass model

When JavaScript starts executing a function (or a script), the engine does NOT just walk the lines top to bottom. It runs two passes over the code:

1. Parse / declaration phase - the engine scans the body and creates bindings for every var, let, const, function, and class it finds, BEFORE executing the first line. This is where "hoisting" happens.
2. Execution phase - the engine now runs the code line by line, evaluating expressions and assigning to those bindings.

Each declaration type leaves a slightly different state at the end of the parse phase. That small difference is the source of every hoisting trick. The table below summarises the states.

sequenceDiagram
  participant Parse as Parse phase
  participant Exec as Execution phase
  Parse->>Exec: scan body, set up bindings
  Note over Parse: var x = undefined
let y = TDZ
const z = TDZ
function f = whole fn
class C = TDZ
  Exec->>Exec: line 1 - read x -> undefined
  Exec->>Exec: line 2 - read y -> ReferenceError
  Exec->>Exec: line 3 - call f() -> works
  Exec->>Exec: line 4 - x = 5 - assign now
  Exec->>Exec: line 5 - let y = 10 - now safe

6a. var hoisting - declared + undefined

The classic. The declaration moves to the top of the function scope; the assignment stays where it is.

// var hoisting - declaration goes up, assignment stays
console.log(retries);   // undefined - NOT an error
var retries = 3;
console.log(retries);   // 3

// what V8 actually treats it as:
//   var retries;          (parse - hoisted)
//   console.log(retries); // undefined
//   retries = 3;          (execute)
//   console.log(retries); // 3

6b. let / const hoisting - the TDZ

With let and const, the name is hoisted but stays uninitialised. The window between the start of the block and the line that actually runs the declaration is called the Temporal Dead Zone. Reading the name inside that window throws a ReferenceError. The TDZ exists on purpose - it forces top-to-bottom thinking and catches "I used this before I declared it" bugs.

// let / const - hoisted but in TDZ until the declaration line runs
function show() {
  // console.log(timeout); // ReferenceError: Cannot access 'timeout' before initialization
  let timeout = 30; // TDZ ends here
  console.log(timeout); // 30
}

show();

6c. Function declaration hoisting - whole function moves up

A function declaration (the statement form, not the expression form) is hoisted in its entirety - name AND body. You can call it before its source line. This is one of the few cases where "use before declare" is intentional and idiomatic.

// function declaration - fully hoisted, callable from line 1
console.log(double(7)); // 14 - works

function double(n) {
  return n * 2;
}

console.log(double(9)); // 18 - also works

flowchart TB
  P[Parse phase] --> H[hoist whole function body]
  H --> B[binding double = function definition]
  B --> E[Execute phase]
  E --> C1[line 1: call double 7  -> 14]
  E --> C2[line 3: source declaration line - no-op]
  E --> C3[line 7: call double 9 -> 18]

6d. Function expression hoisting - only the binding

A function expression assigned to a var only hoists the variable name. The function body is part of the assignment, which happens in the execute phase. So calling it before the assignment line throws a TypeError: ... is not a function - because the binding is undefined at that point.

// function expression - only the var name is hoisted
// console.log(triple(7)); // TypeError: triple is not a function

var triple = function (n) {
  return n * 3;
};

console.log(triple(9)); // 27 - works after the assignment

6e. Class hoisting - declared but in TDZ

Class declarations behave like let - the name is hoisted but unusable until the declaration line is reached. This is intentional. ES2015 designers wanted classes to feel like "no hoisting" so the syntax reads top-to-bottom like Java or C#.

// class hoisting - TDZ until the declaration line
// const card = new ProductCard('tta-001');  // ReferenceError

class ProductCard {
  constructor(sku) { this.sku = sku; }
}

const card = new ProductCard('tta-001'); // OK after the line
console.log(card.sku);

6f. Hoisting inside an if block

Where does a var inside an if block actually live? The function. Where does a let live? The block. Same source - different scopes for these two keywords.

// var inside if leaks to function; let inside if stays in block
function demo() {
  if (true) {
    var a = 1;
    let b = 2;
  }
  console.log(a);            // 1   - var leaked to function
  // console.log(b);     // ReferenceError - let stayed in block
}
demo();

flowchart TB
  FN[function demo - scope] --> IFB[if block - scope]
  IFB --> VAR1[var a - hoisted UP to fn scope]
  IFB --> LET1[let b - stays in block scope]
  FN --> READ_A[outside if: read a -> 1]
  FN --> READ_B[outside if: read b -> ReferenceError]

6g. Hoisting inside a for loop

A loop variable declared with var is just one binding for the whole loop - and after the loop, it's still visible. A let loop variable creates a new binding per iteration - and disappears after the loop. The behaviour of closures captured inside the loop changes accordingly (we saw the timeout puzzle earlier).

function demo() {
  for (var i = 0; i < 3; i++) { /* ... */ }
  console.log(i);   // 3 - var i leaked OUT of the loop

  for (let j = 0; j < 3; j++) { /* ... */ }
  // console.log(j); // ReferenceError - let j stayed inside
}
demo();

6h. Hoisting in arrow functions

Arrow functions are always expressions. They are never hoisted as a whole - only their binding hoists, the same way a function expression does. There is no such thing as an arrow function declaration. This is why old codebases that mix arrows and declarations sometimes show inconsistent call-before-declare behaviour.

// arrows are always expressions
// add(2, 3); // ReferenceError (let) or TypeError (var)

const add = (a, b) => a + b;

console.log(add(2, 3)); // 5 - after the const line

07Literals + null vs undefined ch 3 - 19_Identifier to 23_null_undefined

A literal is a value you spell out directly in source code, as opposed to constructing it with a function or operator. 42 is a number literal. 'hi' is a string literal. JavaScript has eleven literal forms across its value types - including a few that did not exist when the original chapter 3 lecture was first recorded.

Every literal form

// every literal form, one line each
const price   = 199;                  // number literal
const hex     = 0xff;                 // 255 in hex
const name    = 'tta-001';            // string
const label   = `item: ${name}`;      // template
const ok      = true;                // boolean
const empty   = null;                // null - intentional absent
let   later;                          // undefined - not yet set
const big     = 10n;                  // BigInt
const id      = Symbol('id');         // Symbol
const re      = /^Rs \d+$/;             // RegExp
const obj     = { sku: name, price }; // object literal
const list    = [1, 2, 3];            // array literal

console.log(typeof price, typeof name, typeof empty, typeof later);
// -> 'number' 'string' 'object' 'undefined'

flowchart LR
  V[every value] --> P{primitive?}
  P -- yes --> PRIM[number / string / boolean / null / undefined / symbol / bigint]
  P -- no --> OBJ[object / array / function / class instance]
  PRIM --> COPY[copied by VALUE]
  OBJ --> REF[passed by REFERENCE]

Why typeof null is 'object'

One of the oldest and most famous bugs in JavaScript. In the original 1995 implementation, every value was tagged with a 1-byte type code. null was represented as the all-zero pointer, which had a type tag of zero. The type tag for objects was also zero. So typeof null walked the same path as typeof someObject and returned 'object'. The bug was reported, a fix was drafted, and it was rejected as a breaking change. The bug is now part of the spec - permanently.

null vs undefined - the distinction

Both mean "no value", but they signal different intent:

flowchart LR
  V[a value slot]
  V --> UND[undefined]
  V --> NUL[null]
  UND --> UM[meaning: engine has not set me]
  NUL --> NM[meaning: human has set me to empty on purpose]
  UM --> FIX[likely a bug if observed]
  NM --> OK[intentional, expected]

08Equality - == vs === vs Object.is ch 3 - 24_equla_triequal, 25_IQ

Three operators that look almost identical and behave very differently. Pick the wrong one in an assertion and your test passes when it shouldn't (or fails when it shouldn't). The short rule: in test code, always use ===. The long rule needs a decision tree - which is the next diagram.

Three operators, three behaviours

flowchart TD
  S[a == b] --> T{types match?}
  T -- yes --> STRICT[then behave like ===]
  T -- no --> A{is one null and other undefined?}
  A -- yes --> OK[result: true]
  A -- no --> B{is one number, other string?}
  B -- yes --> CONV1[convert string to number, recurse]
  B -- no --> C{is one boolean?}
  C -- yes --> CONV2[convert boolean to number, recurse]
  C -- no --> D{is one object, other primitive?}
  D -- yes --> CONV3[object -> primitive via valueOf / toString, recurse]
  D -- no --> FALSE[result: false]

Five famous gotchas, one snippet

// each line is a classic interview puzzle - try them at a REPL
console.log(0 == false);          // true  - boolean -> number, 0 == 0
console.log('' == 0);             // true  - string '' -> 0, 0 == 0
console.log(null == undefined);   // true  - one of the special cases
console.log([] == ![]);            // true  - !![] -> false -> 0; [] -> '' -> 0
console.log(NaN === NaN);          // false - NaN is never equal to anything, even itself
console.log(Object.is(NaN, NaN));    // true  - Object.is exists for this case

Object.is - the third equality

Object.is behaves like === except for two corner cases: Object.is(NaN, NaN) is true, and Object.is(+0, -0) is false. Use it when you need to detect NaN without a separate Number.isNaN check, or when you genuinely care that a calculated zero kept its sign.

09Assignment operators ch 4 - 26 / 27_Assignment_Operators

The single equals = binds a value to a name. Every other assignment operator is the same plus arithmetic - x += 1 is x = x + 1. The interesting ones are the three logical-assigned operators that arrived with ES2021: ??=, ||=, and &&=. They only assign if the left side passes a specific truthy / nullish check.

Every assignment operator

// arithmetic shorthand
let count = 10;
count += 5;   // 15
count *= 2;   // 30
count %= 7;   // 2
count **= 3;  // 8

// logical-assigned (ES2021)
let config = { retries: 0 };
config.retries ||= 3;     // 3 - because 0 is falsy
config.retries ??= 5;     // stays 3 - because 3 is not nullish
config.debug   ??= false; // false - because undefined is nullish

console.log(count, config);
// 8 { retries: 3, debug: false }

10Comparison operators ch 4 - 28_Comparsion_Operators

Six operators that return a boolean. Four for ordering (<, <=, >, >=) and two for inequality (!= and !==). Equality we already covered in section 8. The ordering operators have their own coercion rules - strings compare lexicographically, numbers compare numerically, and when types differ the right side is converted to the type of the left.

flowchart LR
  CMP[a OP b] --> SAME{same type?}
  SAME -- yes --> DIRECT[compare directly]
  SAME -- no --> STR{both strings?}
  STR -- yes --> LEX[lexicographic compare]
  STR -- no --> NUM[convert both to number, compare]
  NUM --> NAN{either NaN?}
  NAN -- yes --> FALSE[result: false]
  NAN -- no --> OK[numeric compare]

// numeric vs lexicographic vs mixed
console.log(5 < 10);          // true  - both numbers
console.log('5' < '10');      // false - '1' < '5' as STRINGS
console.log('5' < 10);        // true  - mixed, '5' -> 5, then 5 < 10
console.log('a' < 'b');        // true  - codepoint compare
console.log('A' < 'a');        // true  - 'A' = 65, 'a' = 97
console.log(NaN < 0);          // false - NaN compares false to everything
console.log(NaN > 0);          // false - including to 0 and to itself

11Logical operators ch 4 - 29_Logical_Operators

Three operators: && (and), || (or), ! (not). In JavaScript they return one of the operands, not necessarily a boolean - this is the short-circuit behaviour. a && b returns a if it's falsy, otherwise b. a || b returns a if it's truthy, otherwise b. !a always returns a real boolean.

Truth table - the values JS actually returns

// short-circuit returns the operand, not a boolean
const user = { name: 'pia' };

// guard + access
const letter = user && user.name[0];   // 'p'

// fallback
const label  = user.role || 'guest';    // 'guest'

// to-boolean coercion
const hasName = !!user.name;            // true

// short-circuit side effect
user && console.log('user is present'); // fires
null && console.log('never fires');     // skipped

The 8 falsy values

Every other value is truthy. Memorise this list - it powers ||, !, and if:

Sometimes-surprising truthy values: '0' (string), [], {}, 'false' (string), function () {}.

12String operators ch 4 - 30_String_Operators

Strings have two operator forms that matter at this stage: the plus operator + (concatenation) and the template literal (interpolation). Plus is the classic way; template literals are the modern preferred form. Avoid the older String.prototype.concat method - it offers nothing the operators don't.

Plus and template literals side by side

// plus operator - concatenation
const name = 'tta';
const batch = 2026;
const a = 'hello ' + name + ' batch ' + batch;
// 'hello tta batch 2026' - + coerces number to string when one side is string

// template literal - interpolation, multi-line, no escapes
const b = `hello ${name} batch ${batch}`;
// same string, cleaner

// multi-line
const tpl = `
<p>Welcome ${name}!</p>
<p>Batch ${batch}.</p>
`;

// pitfall: + with mixed types
console.log('2' + 3);  // '23' - number coerced to string
console.log(2 + '3');  // '23' - same
console.log(2 + 3 + '4'); // '54' - left to right, 2+3=5, then 5+'4'

flowchart LR
  A[2 + 3 + '4'] --> B[step 1: 2 + 3 = 5  - both numbers, add]
  B --> C[step 2: 5 + '4' = '54'  - one side string, concat]
  D[2 + '3' + 4] --> E[step 1: 2 + '3' = '23' - concat]
  E --> F[step 2: '23' + 4 = '234' - concat continues]

13Ternary operator ch 4 - 31_Ternary_Operators

The only three-operand operator in JavaScript. cond ? a : b evaluates cond; if truthy, returns a; otherwise returns b. Ternary is a values-only construct - both branches must produce a value, and the result is a value (not a statement). Use it inside expressions; do not abuse it for control flow.

flowchart LR
  COND[cond expression] --> Q{truthy?}
  Q -- yes --> A[evaluate a, return a]
  Q -- no  --> B[evaluate b, return b]
  A --> R[result of the whole expression]
  B --> R

// ternary as an inline if
const age = 17;
const tag = age >= 18 ? 'adult' : 'minor';
console.log(tag); // 'minor'

// nested - readable when wrapped, ugly when not
const grade = (score) =>
  score >= 90 ? 'A'
  : score >= 75 ? 'B'
  : score >= 50 ? 'C'
  :                'F';

console.log(grade(82)); // 'B'

14Type operators ch 4 - 31_Type_Operators

Five operators that act on the type or membership of a value, not its arithmetic value. typeof returns a string. instanceof walks the prototype chain. in checks property existence. delete removes a property. void is a niche bookmarklet-era operator that forces an expression to evaluate to undefined.

The typeof grid - all nine results

// typeof - safe even on undeclared names
console.log(typeof undeclared);   // 'undefined' - no error

// instanceof - prototype chain walk
console.log([] instanceof Array);   // true
console.log([] instanceof Object);  // true - Array extends Object

// in - includes inherited keys
const cart = { sku: 'tta-001', qty: 2 };
console.log('sku' in cart);          // true
console.log('toString' in cart);     // true - inherited from Object.prototype

// delete - removes own property
delete cart.qty;
console.log(cart);                  // { sku: 'tta-001' }

// void - force undefined result
console.log(void 0);                // undefined
console.log(void runForSideEffect?.()); // undefined regardless of return

15Nullish coalescing + optional chaining ch 4 - 32_Null_Optinal_Value

Two operators added in ES2020 that quietly transformed everyday JavaScript code. Optional chaining ?. short-circuits a property access if the left side is null or undefined. Nullish coalescing ?? picks the right side only when the left side is nullish. Together they replace dozens of guard clauses you used to write with && and ||.

Optional chaining - the safe dot

const cart = { items: [{ sku: 'tta-001', price: 199 }] };
const empty = {};

// before ?. (old style)
const a = cart && cart.items && cart.items[0] && cart.items[0].price;
// 199

// after ?. - same intent, far cleaner
const b = cart?.items?.[0]?.price;        // 199
const c = empty?.items?.[0]?.price;       // undefined - no error

// optional method call
const d = cart.checkout?.();                // undefined if checkout is not a function

// optional via dynamic key
const key = 'items';
const e = cart?.[key]?.length;            // 1

flowchart LR
  L[left] --> Q{is left null or undefined?}
  Q -- yes --> UNDEF[short-circuit, return undefined]
  Q -- no  --> R[evaluate right side normally]
  R --> VAL[return the property / call result]

Nullish coalescing - the keep-zero default

|| picks the right side when the left is falsy - which includes 0, '', and false. ?? picks the right side only when the left is nullish - null or undefined. For numeric and string defaults where 0 or '' are legal, ?? is the correct choice.

// || treats 0 and '' as "not given"
const retries1 = 0 || 3;            // 3 - 0 was falsy
const label1   = '' || 'guest';      // 'guest'

// ?? respects 0 and ''
const retries2 = 0 ?? 3;            // 0 - 0 is not nullish
const label2   = '' ?? 'guest';      // '' - '' is not nullish

const cfg = { timeout: 0, tag: null };
const timeout = cfg.timeout ?? 30;       // 0 - intentional zero, kept
const tag     = cfg.tag ?? 'untagged';     // 'untagged' - null is nullish

Combining ?. and ??

The two operators are designed to compose. The pattern below shows up dozens of times in a typical Playwright suite:

// safely read a deep value, default if missing
const price = order?.items?.[0]?.discount?.value ?? 0;

// before ES2020 you needed something like:
//   const price = (order && order.items && order.items[0] && order.items[0].discount && order.items[0].discount.value !== undefined)
//     ? order.items[0].discount.value
//     : 0;

16Spread / rest / comma / exponentiation ch 4 - extras

Four smaller operators that round out chapter 4. Spread and rest share the ... token but appear on opposite sides - one expands a value, the other collects. The comma operator is rare but does turn up in for-loop heads. Exponentiation ** replaces Math.pow in modern code.

Spread / rest - same token, opposite roles

// spread - expand into args / elements
const nums = [3, 7, 2, 9];
console.log(Math.max(...nums)); // 9

const a = [1, 2], b = [3, 4];
const c = [...a, ...b, 5]; // [1, 2, 3, 4, 5]

// rest - collect remaining args
function log(level, ...parts) {
  console.log(`[${level}]`, ...parts);
}
log('info', 'started', 42, { ok: true });

// object spread - shallow merge
const base     = { retries: 3, timeout: 30 };
const override = { timeout: 60 };
const final    = { ...base, ...override }; // { retries: 3, timeout: 60 }

Exponentiation

** is right-associative and produces a number. Use it instead of Math.pow.

console.log(2 ** 8);    // 256
console.log(2 ** 3 ** 2); // 512 - right-associative: 2 ** (3 ** 2) = 2 ** 9
console.log(9 ** 0.5);  // 3   - square root via fractional exponent

flowchart LR
  A[2 ** 3 ** 2] --> B[right associative]
  B --> C[evaluate 3 ** 2 first = 9]
  C --> D[then 2 ** 9 = 512]
  E[2 ** 8] --> F[straight power: 256]
  G[9 ** 0.5] --> H[fractional = sqrt: 3]

Comma operator

Evaluates each expression left-to-right and returns the last value. Rare but turns up in for loop heads.

// comma operator - returns the LAST expression
const x = (1, 2, 3);     // 3

// for-loop with two counters
for (let i = 0, j = 10; i < j; i++, j--) {
  // runs while i < j; both counters tick each pass
}

17Interview puzzles - chapters 1-4 ch 3 - 25_IQ + chapter mix

Ten classic predict-the-output puzzles drawn from chapter 3's interview-question file and extended across all four chapters. Try to predict every line without running it. Then run it in node and read the answer reveal.

console.log(typeof undeclared);
console.log(typeof null);
console.log(typeof NaN);

console.log(a);
var a = 5;
console.log(a);

console.log(a);
let a = 5;

greet();
function greet() {
  console.log('hi');
}

greet();
const greet = () => console.log('hi');

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

console.log([] == false);
console.log([] === false);

console.log(1 + '2' + 3);
console.log('1' + 2 + 3);
console.log(1 + 2 + '3');

console.log(0 || 'a');
console.log(0 ?? 'a');
console.log('' || 'b');
console.log('' ?? 'b');

const cfg = { retries: 0 };
console.log(cfg.retries || 3);
console.log(cfg.retries ?? 3);
console.log(cfg?.retries ?? 3);

18What's next

Five more deep pages will follow this one, each covering a chapter group. The hub page tracks status. Until the next page is ready, the existing TTA pages below are the closest running-code targets.