JavaScript Interview Questions

Declarations are processed before any code runs. A var is created and initialised to undefined, so reading it early gives undefined. A let or const is created but left uninitialised — the temporal dead zone — and reading it early throws.

console.log(a); var a = 1;    // undefined
console.log(b); let b = 1;    // ReferenceError: Cannot access 'b' before initialization

Function declarations are hoisted whole and callable before their line; function expressions assigned to a variable follow that variable’s rules.

undefined is the absence the language produces: an unassigned variable, a missing parameter, a property that is not there, a function with no return. null is the absence a programmer writes deliberately.

typeof undefined  // "undefined"
typeof null       // "object"  — a bug kept for compatibility
null == undefined   // true  (loose)
null === undefined  // false (strict)

Default parameters and ?? treat only null and undefined as missing, which is what makes them safer than || when 0 or "" is a legitimate value.

Spread and Object.assign copy one level: nested objects are still shared references, so mutating a nested value shows up in both copies.

const shallow = { ...original };
const deep    = structuredClone(original);   // modern, handles Dates, Maps, cycles
const crude   = JSON.parse(JSON.stringify(original)); // loses Dates, undefined, functions

structuredClone is the right default now. The JSON round-trip is still common but silently mangles anything that is not plain JSON.

map returns a new array of the results, so it composes: xs.map(f).filter(g). forEach returns undefined and exists only for side effects.

Neither can be broken out of early. When you need that, use a for...of, or some/find which short-circuit by design.

slice(start, end) returns a copy of a section and leaves the original alone. splice(start, count, ...items) mutates the array in place, removing and inserting, and returns what it removed.

const xs = [1, 2, 3, 4];
xs.slice(1, 3);     // [2, 3]      xs unchanged
xs.splice(1, 2);    // [2, 3]      xs is now [1, 4]

Same story across the array methods: sort, reverse and fill mutate; concat, flat and the newer toSorted/toReversed do not.

You get the Promise itself, not its value, and the function continues immediately. If the Promise later rejects, nothing is handling it — an unhandled rejection that crashes Node or logs an error nobody attributes to the right line.

const user = getUser();          // a Promise, not a user
if (user.isAdmin) { /* undefined: always falsy */ }

await Promise.all([a(), b()]);   // both start, then both awaited

Starting the calls first and awaiting after is how you run work concurrently on purpose — awaiting each in turn serialises them for no reason.

try/catch around an await catches a rejection. It does not catch a rejection from a Promise you never awaited, nor one thrown inside a callback that runs later, such as a setTimeout body.

try { await risky(); } catch (e) { /* caught */ }

try { risky(); } catch (e) { /* NOT caught: no await */ }
setTimeout(() => { throw new Error(); }, 0);  // NOT caught

For fire-and-forget work, attach .catch() explicitly. At the process edge, listen for unhandledrejection so nothing fails silently.

JavaScript runs one piece of code at a time, but await yields — anything can run between the start and end of an async function. Two overlapping calls can interleave and clobber shared state.

let cache = null;
async function get() {
  if (!cache) cache = await fetchIt();  // two callers both see null and both fetch
  return cache;
}
// fix: cache the Promise, not the value
let inflight = null;
function get() { return inflight ??= fetchIt(); }

The general shape of the fix is to make the in-progress operation itself the thing you store, so the second caller joins the first instead of starting a second.

Promises are not cancellable, so you cancel the operation behind them with an AbortController. fetch takes its signal and rejects with an AbortError.

const ctrl = new AbortController();
fetch(url, { signal: ctrl.signal })
  .catch(e => { if (e.name !== 'AbortError') throw e; });
ctrl.abort();     // e.g. the user typed again, or the component unmounted

This is what stops a stale search response from overwriting a newer one, and what prevents a state update after a component has gone away.

queueMicrotask runs in the microtask queue, which drains completely before the next macrotask — the same queue Promise callbacks use. setTimeout(fn, 0) schedules a macrotask, so it runs after the current microtask queue empties and after rendering has had its chance.

setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('micro'));
console.log('sync');
// sync, promise, micro, timeout

A function* can pause at yield and resume where it left off, producing values lazily. That makes infinite or expensive sequences cheap — you compute only what is consumed.

function* ids() { let i = 0; while (true) yield ++i; }
const it = ids();
it.next().value;   // 1
it.next().value;   // 2

They are the machinery under async/await, and are still the clean way to write custom iterables, paginate an API lazily, or walk a tree without building the whole list.

ES modules are static: import/export are analysed before execution, which is what makes tree-shaking and circular-import detection possible. CommonJS require() is a synchronous function call resolved at runtime, so the dependency graph is only known by running the code.

// ESM — hoisted, live bindings, always strict mode
import { helper } from './helper.js';
export const value = 1;

// CJS — runtime, copies the value at require time
const { helper } = require('./helper');
module.exports = { value: 1 };

ESM bindings are live: reassign an export and importers see the new value. A CommonJS destructure captures a snapshot.

Caching a pure function’s result by its arguments, so a repeat call is a lookup. It pays when the function is expensive and called repeatedly with the same inputs.

const memo = (fn, cache = new Map()) => (...args) => {
  const k = JSON.stringify(args);
  if (!cache.has(k)) cache.set(k, fn(...args));
  return cache.get(k);
};

All three set this. call invokes immediately with arguments listed; apply invokes immediately with arguments as an array; bind invokes nothing and returns a new function with this fixed.

greet.call(user, 'hi');
greet.apply(user, ['hi']);
const bound = greet.bind(user);   // call later

bind is what makes a method safe to pass as a callback in code that predates arrow functions. Note an arrow function ignores all three — its this is captured from the enclosing scope and cannot be reassigned.

Map takes any value as a key (including objects), keeps insertion order, reports size directly, and has no prototype keys to collide with. An object coerces every key to a string and inherits from Object.prototype.

const m = new Map([[objKey, 1]]);
m.get(objKey);        // 1 — an object as a real key

const s = new Set([1, 1, 2]);
s.has(1);             // O(1); array.includes is O(n)

Reach for Map when keys are dynamic or not strings, and Set for membership tests and de-duplication. A plain object is still right for a fixed, known shape — and it is the only one of the four that serialises to JSON directly.