JavaScript (ES5 → ES2025) & TypeScript Basics

In short: === (strict equality) compares type and value without conversion.

• == (loose equality) converts operands to a common type first, which produces surprises ("" == 0 is true, null == undefined is true, [] == false is true).
• Always use === (except, by some style guides, x == null to check null or undefined).

In short: var is function-scoped, hoisted and initialised as undefined, can be re-declared, and creates a property on the global object at top level.

• let and const are block-scoped and hoisted but in the Temporal Dead Zone until their declaration (accessing them earlier throws).
• Neither can be re-declared in the same scope.
• const can't be reassigned, but the object it references can still be mutated.
• Default to const, use let when reassigning, avoid var.

In short: During the creation phase of an execution context, declarations are registered before code runs.

• var variables are hoisted and initialised to undefined.
• Function declarations are hoisted with their body (callable before the line they appear on).
• let, const and class are hoisted but uninitialised (TDZ → ReferenceError if used early).
• Function expressions and arrow functions follow the rules of the variable they're assigned to.

In short: string, number, bigint, boolean, undefined, null and symbol.

• They are immutable and compared by value.
• Everything else (objects, arrays, functions, dates) is an object compared by reference.
• typeof null returns "object" due to a historical bug.

In short: undefined means a variable has been declared but not assigned, a missing property, or a function with no return value — set by the engine.

• null is an intentional "no value" assigned by the programmer.
• typeof undefined is "undefined", typeof null is "object"; null == undefined is true but null === undefined is false.
• ?? and ?. treat both as nullish.

In short: A concise function syntax (x => x * 2).

• Differences: no own this (lexically inherited — great for callbacks), no arguments object, can't be used as constructors with new, no prototype, and implicit return for single expressions.
• Don't use them as object methods or prototype methods that need dynamic this.

In short: A closure is a function that remembers the variables from the scope where it was created, even after that scope has finished executing.

• Example: function counter() { let c = 0; return () => ++c; } — each returned function has its own private c.
• Practical uses: data privacy, function factories, memoisation caches, debounce/throttle timers, partial application, event handlers capturing loop values (with let).

In short: JavaScript executes on a single thread with a call stack.

• Asynchronous operations (timers, network, events) are handled by the browser/Node APIs, which queue callbacks when done.
• When the call stack is empty, the event loop first runs all microtasks (promise reactions, queueMicrotask), then (in browsers) lets rendering happen, then picks the next macrotask (setTimeout, I/O, UI events).
• That's why a resolved promise's .then runs before a setTimeout(..., 0) callback.

In short: A Promise represents the eventual result of an asynchronous operation, in state pending, fulfilled or rejected; .then/.catch/.finally register reactions.

• Promise.all waits for all and rejects on the first failure.
• allSettled waits for all and returns each outcome.
• race settles with the first settled promise (success or failure).
• any fulfils with the first success and rejects with AggregateError only if all fail.

In short: It depends on the call site: method call → the object before the dot;

• plain function call → undefined in strict mode (global object otherwise);
• constructor with new → the new instance;
• call/apply/bind → explicitly set;
• event listeners with regular functions → the element;
• arrow functions → this of the enclosing lexical scope.
• Losing this when passing methods as callbacks is fixed with bind or arrow functions.

In short: All set this explicitly.

• call(thisArg, a, b) invokes immediately with individual arguments.
• apply(thisArg, [a, b]) invokes immediately with an array of arguments.
• bind(thisArg, a) doesn't invoke — it returns a new function with this (and optionally leading arguments) permanently bound, useful for callbacks and event handlers.

In short: Objects inherit directly from other objects through the internal [[Prototype]] link.

• When a property isn't found on an object, the engine looks up its prototype chain.
• Constructor functions share methods via Constructor.prototype;
• Object.create(proto) creates objects with a chosen prototype;
• ES6 class/extends is syntax over the same mechanism (Dog.prototype.__proto__ === Animal.prototype).

In short: Attaching a single event listener to a common ancestor instead of each child, using event bubbling and event.target (often with closest()) to identify which child was interacted with.

• Benefits: fewer listeners (memory/performance), works for elements added later dynamically, simpler cleanup.
• Note: some events don't bubble (focus, blur — use focusin/focusout).

Debounce delays execution until calls stop for a given time (search-as-you-type, auto-save, resize end). Throttle guarantees execution at most once per interval (scroll position, mousemove, rate-limited API calls).

const debounce = (fn, ms) => { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; };
const throttle = (fn, ms) => { let last = 0; return (...a) => { const now = Date.now(); if (now - last >= ms) { last = now; fn(...a); } }; };

In short: Unremoved event listeners and timers (setInterval never cleared), references to detached DOM nodes, accidental globals, closures capturing large objects, ever-growing caches/maps, and subscriptions not unsubscribed in SPA components.

• Find them with Chrome DevTools: Performance monitor (JS heap growing), Memory tab heap snapshots compared over time, "Detached elements" panel, and allocation timelines.
• Fix with cleanup on unmount, WeakMap/WeakRef for metadata, and bounded caches.

In short: Debounce the input (e.g. 300 ms) so the request fires only after typing pauses;

• ignore queries shorter than 2–3 characters;
• cancel the previous in-flight request with AbortController so stale responses don't overwrite newer results (or track the latest request id);
• cache recent results;
• show a loading state.
• On the server, add rate limiting and make the search endpoint efficient (indexes, paging).

In short: The main thread is blocked by long synchronous work.

• Move parsing/processing into a Web Worker (postMessage the data or a File/Blob, return results);
• stream the file with ReadableStream / process in chunks;
• better, process it on the server and fetch paginated or aggregated results;
• virtualise large lists when rendering;
• show progress.
• Measure with the DevTools Performance panel (long tasks).