JavaScript

JavaScript is dynamically typed: variables don’t have types, values do. There are 7 primitives and everything else is an object.

• Primitives (immutable, copied by value): string, number, boolean, null, undefined, bigint, symbol.
• Objects (arrays, functions, plain objects) are reference types — assigning copies the reference, so both names point at the same object.
• typeof reports the type — with two classic quirks: typeof null === "object" (a historic bug) and typeof function(){} === "function".

let a = 1; let b = a; b = 9;          // a stays 1 (value copied)

let x = [1]; let y = x; y[0] = 9;     // x[0] is now 9 (same array)

typeof undefined  // "undefined"
typeof null       // "object"  (quirk)
NaN === NaN       // false — use Number.isNaN()

• Default to const; use let only when you reassign; avoid var.
• const stops reassignment, not mutation — const o = {}; o.x = 1 is fine.
• TDZ (temporal dead zone): a let/const exists but can’t be read until its declaration runs — touching it early throws, unlike var which reads as undefined.

const cfg = { retries: 3 };
cfg.retries = 5;     // OK — mutating
cfg = {};            // TypeError — reassigning a const

Hoisting: declarations are processed before code runs. function declarations are fully hoisted (callable above their definition); var is hoisted as undefined; let/const are hoisted into the TDZ.

A closure is a function that remembers the variables from the scope where it was created, even after that scope has returned. It’s the backbone of private state and the single most-asked JS concept.

function counter() {
  let n = 0;                 // captured by the closure
  return () => ++n;          // remembers n after counter() returns
}
const next = counter();
next(); next();              // 1, then 2

// classic interview bug — var is function-scoped:
for (var i = 0; i < 3; i++) setTimeout(() => console.log(i));  // 3 3 3
for (let i = 0; i < 3; i++) setTimeout(() => console.log(i));  // 0 1 2

this is decided by how a function is called, not where it’s defined — except arrow functions.

• Method call obj.fn() — this is obj.
• Plain call fn() — this is undefined in strict mode (else the global object).
• Arrow function — has no own this; it inherits from the enclosing scope. Ideal for callbacks.
• call/apply invoke with an explicit this; bind returns a new function permanently bound.

const user = {
  name: "Ada",
  greetLater() {
    setTimeout(() => console.log(this.name), 0);  // arrow keeps `this` = user
  }
};
user.greetLater();   // "Ada"

const loose = user.greetLater;
// loose();          // a plain `function` callback here would lose `this`

JS inheritance is prototype-based: every object has a hidden link to a prototype object, and property lookups walk up that prototype chain until found or it hits null.

class (ES6) is syntactic sugar over prototypes — cleaner syntax, same mechanism.

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}
class Dog extends Animal {
  speak() { return `${this.name} barks`; }   // override
}
new Dog("Rex").speak();   // "Rex barks"

// equivalent prototype lookup:
Object.getPrototypeOf(new Dog("Rex")) === Dog.prototype;  // true

• Immutable iteration — map, filter, reduce, find, some/every return new values without mutating the source.
• Destructuring — pull fields out of objects/arrays in one line.
• Spread / rest (...) — copy & merge, or gather arguments.
• Optional chaining ?. and nullish coalescing ?? for safe access and defaults (?? only falls back on null/undefined, unlike ||).

const users = [{ id: 1, role: "admin" }, { id: 2, role: "user" }];
const admins = users.filter(u => u.role === "admin").map(u => u.id);

const { id, role = "guest" } = users[0];      // destructure + default
const merged = { ...users[0], active: true };  // spread copy

const city = order?.address?.city ?? "unknown";  // safe + fallback

JS is single-threaded. The event loop is how it does non-blocking work: synchronous code runs on the call stack; async callbacks wait in queues and run only when the stack is empty.

• Call stack — runs synchronous code now.
• Microtask queue — resolved promise callbacks (.then, await continuations). Drained fully after each task, before any macrotask.
• Macrotask queue — setTimeout, I/O, events. One per loop turn.

console.log(1);
setTimeout(() => console.log(2), 0);   // macrotask
Promise.resolve().then(() => console.log(3)); // microtask
console.log(4);
// prints 1, 4, 3, 2  — microtasks beat the timer

A Promise represents a future value: pending → fulfilled | rejected. async/await is syntax over promises that reads like synchronous code.

• await pauses the async function until the promise settles, without blocking the thread.
• Wrap await in try/catch to handle rejections (the equivalent of .catch).
• Promise.all runs work concurrently and fails fast; Promise.allSettled waits for all regardless; Promise.race takes the first to settle.
• Don’t await in a loop when calls are independent — fire them together with Promise.all.

async function loadUser(id) {
  try {
    const res = await fetch(`/users/${id}`);
    if (!res.ok) throw new Error(res.status);
    return await res.json();
  } catch (e) {
    console.error("load failed", e);
    throw e;
  }
}

// concurrent, not sequential:
const [a, b] = await Promise.all([loadUser(1), loadUser(2)]);

For a Playwright/SDET role the JS testing surface is small and worth naming:

• Playwright Test — the runner you’ll use most: test/expect, fixtures, auto-waiting web-first assertions, parallel projects, trace viewer.
• Jest / Vitest — unit testing: describe/it/expect, mocks & spies (jest.fn(), jest.mock()), snapshots.
• Cypress — alternative E2E framework; in-browser, good DX, retry-able assertions.
• TypeScript — most modern test suites are TS for type-safe page objects and fixtures.

import { test, expect } from '@playwright/test';

test('user can sign in', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ada@test.dev');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page.getByText('Welcome')).toBeVisible(); // auto-retries
});