JavaScript Interview Questions and Answers

All three declare variables, but they differ in scope, hoisting and reassignment.

• const stops reassignment of the binding, not mutation of the value: const a = []; a.push(1) works.
• Prefer const by default, let when you must reassign, and avoid var in new code.
• A var declared at the top level of a script becomes a property of the global object; let and const do not.

What they are checking: Whether you understand scope and the temporal dead zone, not only the table

Hoisting means declarations are processed before the code runs. So names are known in their scope before the line that declares them.

• var is hoisted and initialised with undefined, so reading it early gives undefined.
• let and const are hoisted but not initialised. Accessing them before the declaration throws a ReferenceError (the temporal dead zone).
• Function declarations are hoisted with their body, so you can call them before they appear.
• Function expressions and arrow functions follow the rule of the variable that holds them.

console.log(a); // undefined
var a = 1;
sayHi();        // works
function sayHi() { console.log("hi"); }
console.log(b); // ReferenceError
let b = 2;

What they are checking: Whether you know the difference between var, let and function hoisting

A closure is a function together with the variables from the scope where it was created. The function keeps access to those variables even after the outer function has returned.

function makeCounter() {
  let count = 0;
  return () => ++count;
}
const next = makeCounter();
next(); // 1
next(); // 2

count is private: nothing outside can change it except through the returned function.

Common uses: data privacy, function factories, partial application, memoisation, and event handlers or callbacks that remember state. A common trap is capturing a loop variable declared with var. Also, a closure that holds a large object can keep it in memory longer than you expect.

What they are checking: Whether you can explain it simply and name real uses

this is decided by how a function is called, not where it is written. Arrow functions are the exception.

• Method call obj.fn(): this is obj.
• Plain call fn(): this is undefined in strict mode and modules, the global object in sloppy mode.
• new Fn(): this is the new object.
• call, apply, bind: you set this yourself.
• Arrow functions have no own this; they use the one from the enclosing scope.
• In a DOM event handler (regular function), this is the element.

const user = { name: "Asha", hi() { return this.name; } };
user.hi();        // "Asha"
const f = user.hi;
f();              // this lost: undefined or error in strict mode

What they are checking: Whether you can predict this from the call site

All three set this for a function. They differ in when the function runs and how arguments are passed.

• fn.call(thisArg, a, b): runs now, arguments listed one by one.
• fn.apply(thisArg, [a, b]): runs now, arguments as an array.
• fn.bind(thisArg, a): does not run; returns a new function with this (and optionally leading arguments) fixed.

function intro(city, country) { return `${this.name}, ${city}, ${country}`; }
const p = { name: "Sita" };
intro.call(p, "Pokhara", "Nepal");
intro.apply(p, ["Pokhara", "Nepal"]);
const bound = intro.bind(p, "Pokhara");
bound("Nepal");

A bound function cannot be re-bound to a different this.

What they are checking: Whether you know each one's timing and argument style

=== (strict equality) compares value and type with no conversion. == (loose equality) first converts both sides to a common type. This gives unexpected results.

0 == "0"        // true
0 === "0"       // false
null == undefined   // true
null === undefined  // false
NaN === NaN     // false
[] == false     // true

Use === by default. The one accepted use of == is value == null to test for both null and undefined. For NaN use Number.isNaN, and Object.is treats NaN as equal to itself and distinguishes +0 from -0.

What they are checking: Whether you know type coercion and default to strict equality

It prints 3 3 3.

var is function scoped, so there is one shared i. The timeout callbacks run after the loop ends, when i is already 3.

Fixes:

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

// 2. IIFE capturing the value
for (var i = 0; i < 3; i++) {
  ((j) => setTimeout(() => console.log(j), 0))(i);
}

This is the classic closure-in-loop question. The key point is that closures capture variables, not values.

What they are checking: Whether you connect closures and scope to a real bug

A Promise is an object representing the eventual result of an async operation. It has three states:

• pending: the initial state.
• fulfilled: finished with a value.
• rejected: failed with a reason.

Once settled (fulfilled or rejected) it never changes. You consume it with .then(), .catch() and .finally(), and each returns a new promise, so calls chain.

const wait = (ms) => new Promise((res) => setTimeout(res, ms));
wait(100)
  .then(() => "done")
  .then(console.log)
  .catch(console.error)
  .finally(() => console.log("cleanup"));

An error thrown inside .then becomes a rejection of the returned promise. A missing .catch gives an unhandled rejection.

What they are checking: Whether you know the states and how chaining works

Every object has an internal link ([[Prototype]], readable with Object.getPrototypeOf) to another object. When you read a property that is not on the object, the engine follows this chain. It stops when it finds the property or reaches null.

Both use ..., but they do opposite jobs.

• Spread expands an iterable or object into individual elements.
• Rest collects remaining items into an array or object.

undefined means a value has not been assigned: an uninitialised variable, a missing property, a missing argument, or a function with no return. null is a "no value" that a developer sets on purpose.

Seven primitives: string, number, bigint, boolean, undefined, null and symbol. Everything else is an object (arrays, functions, dates, maps).

Primitives are immutable and compared by value; objects are compared by reference.

They are array methods that return results without mutating the original array.

• Optional chaining ?. stops and returns undefined if the value before it is null or undefined. It does not throw.
• Nullish coalescing ?? returns the right side only when the left is null or undefined.

map returns a new array built from the callback's return values. forEach returns undefined and is used only for side effects.

The first console.log(a) prints undefined because var is hoisted and initialised to undefined. The second throws ReferenceError: Cannot access 'b' before initialization.

Destructuring unpacks values from arrays or objects into variables.

• false: numbers are IEEE 754 doubles, and 0.1 + 0.2 is 0.30000000000000004. Compare with a tolerance: Math.abs(a - b) < Number.EPSILON, or use integers (cents).
• "number": NaN is a number type.
• [1, 10, 9]: sort() without a comparator converts items to strings and compares them. Use sort((a, b) => a - b) for numbers.
• "" (empty string): both arrays convert to empty strings, then concatenate.

Functions are first-class in JavaScript: they can be stored in variables, passed as arguments, and returned from other functions. A higher-order function either takes a function as an argument, returns one, or both.

A declaration is a statement with a name; a function expression produces a value and can be anonymous or named.

A pure function returns the same output for the same input and has no side effects. It does not modify external state or its arguments, and it does no I/O.

Strict mode is an opt-in version of JavaScript. You turn it on with "use strict"; at the top of a script or function. ES modules and class bodies are strict automatically.

JavaScript runs your code on one thread. The event loop is what lets it handle async work without blocking.

1. Synchronous code runs on the call stack until it is empty.
2. The host (browser or Node) handles async APIs (timers, network, DOM events). Later it queues a callback.
3. Promise reactions and queueMicrotask callbacks go to the microtask queue. Timers and I/O callbacks go to the macrotask (task) queue.
4. When the stack is empty, the loop runs all microtasks. Then it takes one macrotask and runs it. Then it runs microtasks again, and repeats. In browsers rendering happens between tasks.

What this means: a long synchronous loop freezes the page and delays timers. setTimeout(fn, 0) means "after the current code and microtasks". A microtask that keeps adding microtasks can block rendering.

What they are checking: Whether you can describe stack, queues and ordering, not only say single threaded

Output: 1 4 3 2.

• 1 and 4 are synchronous, so they run first in order.
• The promise callback is a microtask, so it runs as soon as the stack is empty: 3.
• setTimeout is a macrotask, so it runs after the microtasks: 2, even with a delay of 0.

A harder variant adds async function f() { console.log('a'); await null; console.log('b'); }. Code before the first await runs synchronously; the code after it is a microtask. Explain by naming the stack, microtask queue and task queue.

What they are checking: Whether you can trace event loop ordering

async/await is syntax built on top of promises. An async function always returns a promise. await pauses that function until a promise settles, without blocking the thread.

Both are queues the event loop uses, but microtasks have higher priority.

• Microtasks: promise .then/.catch/.finally callbacks, await continuations, queueMicrotask, MutationObserver.
• Macrotasks: setTimeout, setInterval, DOM events, network and I/O callbacks, MessageChannel.

Both limit how often a function runs during rapid events.

• Debounce waits until events stop for N ms, then runs once. Good for search-as-you-type and window resize end.
• Throttle runs at most once per N ms while events keep coming. Good for scroll, mousemove and drag.

A shallow copy duplicates only the top level; nested objects are still shared references. A deep copy duplicates everything.

Arrow functions are shorter, but the real differences are behavioural:

Event delegation puts one listener on a parent element. It uses event bubbling to handle events from the children, and finds the source with event.target.

All take an iterable of promises and return one promise.

Both split code into files, but they differ in syntax and loading.

An event travels in three phases: capturing (window down to the target), target, then bubbling (target back up to window).

• obj.regular() gives "A": called as a method, so this is obj.
• obj.arrow() gives undefined: an arrow function takes this from the place where the object literal sits (module or global scope), not from obj.
• fn() loses the receiver. In strict mode or ES modules this is undefined, so reading .name throws a TypeError. In sloppy mode this is the global object. So it returns undefined (or "" in a browser, where window.name exists).

Currying turns a function of several arguments into a chain of functions. Each one takes one (or some) arguments. It enables reuse through partial application.

Memoization caches results of a pure function keyed by its arguments, so repeated calls are instant.

Return a new promise. Track results by index so the order is kept. Resolve when the count reaches the length. Reject on the first failure.

A callback is a function passed to another function to be called later, often after async work. Callback hell is deeply nested callbacks that are hard to read, handle errors in and refactor.

• const prevents reassigning the variable. The object it points to can still change.
• Object.freeze(obj) makes the object immutable at the top level: no add, delete or change of properties.
• Object.seal(obj) blocks adding and deleting properties, but existing ones can still be changed.
• Object.preventExtensions(obj) blocks only adding.

Engines use mark-and-sweep: starting from roots (global object, stack), they mark everything reachable and free the rest. Reference counting alone fails on cycles, so it is not used.

new Fn(...) does four things: creates an empty object and links its prototype to Fn.prototype. It calls Fn with this set to that object. It returns the object (unless the function returns another object).

The problem: requests can return out of order. A slow response for an old query arrives last and wins.

Use try/catch around await, or .catch() on promise chains. A thrown error in an async function becomes a rejected promise.

Approach: reproduce, measure, compare, fix.

The work runs on the main thread, so it blocks rendering and input. Confirm with the DevTools Performance tab (a long task).

Fire all 1,000 at once and you will hit rate limits or exhaust the browser. Use a pool: start up to 5 workers that each pull the next id until none are left.

Retry only temporary failures (network errors, 5xx, 429). Wait longer each time. Add jitter (a small random delay) so many clients do not retry together. Limit the number of attempts. Do not retry 4xx client errors. Retry non-idempotent requests (like POST) only if the server supports idempotency keys.

Use a Map or object for O(n) work instead of nested loops.

Fix it on both sides, because client checks alone can be bypassed.

Client:

• Disable the button and show a spinner as soon as the submit starts. Enable it again in finally.
• Guard with a flag so a second handler call returns early.