Top 30 Most Asked JavaScript Interview Questions and Answers (2026 Edition)

Q1. What is the difference between var, let, and const?

This is almost always the very first JavaScript question in any interview. All three are ways to declare variables, but they differ in scope, hoisting behaviour, and reassignability.

• var — function-scoped, hoisted and initialised to undefined, can be re-declared.
• let — block-scoped, hoisted but NOT initialised (temporal dead zone), cannot be re-declared in the same scope.
• const — block-scoped, must be initialised at declaration, the binding cannot be reassigned (but object contents can be mutated).

// var - function scoped
function testVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10 — leaks out of the block
}

// let - block scoped
function testLet() {
  if (true) {
    let y = 20;
  }
  // console.log(y); // ReferenceError
}

// const
const obj = { name: "Alice" };
obj.name = "Bob"; // ✅ mutation allowed
// obj = {};       // ❌ TypeError — reassignment not allowed

Q2. What is hoisting in JavaScript?

Hoisting is JavaScript's mechanism of moving declarations to the top of their scope during the compilation phase — before any code executes.

• var declarations are hoisted and initialised to undefined.
• Function declarations are fully hoisted (name + body).
• let / const are hoisted but remain uninitialised in the TDZ until the line of declaration.

console.log(a); // undefined (hoisted)
var a = 5;

greet(); // "Hello!" — function declaration fully hoisted
function greet() { console.log("Hello!"); }

console.log(b); // ReferenceError: Cannot access 'b' before init
let b = 10;

Q3. Explain scope in JavaScript.

Scope determines the visibility and lifetime of a variable. JavaScript has three main types:

• Global scope — accessible everywhere in the program.
• Function scope — variables declared inside a function are accessible only within it.
• Block scope — variables declared with let / const inside {} are confined to that block.

JavaScript also follows lexical (static) scoping — a function's scope is determined by where it is defined in the source code, not where it is called.

let global = "I'm global";

function outer() {
  let outerVar = "outer";

  function inner() {
    let innerVar = "inner";
    console.log(global);   // ✅ accessible
    console.log(outerVar); // ✅ accessible via scope chain
    console.log(innerVar); // ✅ local
  }

  inner();
  // console.log(innerVar); // ❌ ReferenceError
}

Q4. What is a callback function?

A callback is a function passed as an argument to another function and executed at some later point — either after some operation completes or when an event occurs.

function fetchData(url, onSuccess, onError) {
  // simulating an async operation
  setTimeout(() => {
    if (url) onSuccess("Data received");
    else     onError("URL missing");
  }, 1000);
}

fetchData(
  "https://api.example.com",
  (data)  => console.log(data),  // ✅
  (error) => console.error(error)
);

Callback hell occurs when callbacks are nested many levels deep, making code hard to read and maintain. Promises and async/await solve this.

Q5. What are arrow functions and how do they differ from regular functions?

Arrow functions are a concise ES6 syntax for writing functions. Key differences from regular functions:

• No own this — they inherit this from the enclosing lexical scope.
• Cannot be used as constructors (no new).
• No arguments object.
• Cannot be used as generator functions.

// Regular function — 'this' is dynamic
const obj = {
  name: "Alice",
  greet: function() {
    setTimeout(function() {
      console.log(this.name); // undefined — 'this' is window/undefined
    }, 100);
  }
};

// Arrow function — 'this' is lexically bound
const obj2 = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(this.name); // "Alice" ✅
    }, 100);
  }
};

Q6. What is destructuring in JavaScript?

Destructuring allows you to unpack values from arrays or properties from objects into distinct variables, using a concise syntax.

// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first, second, rest); // 1 2 [3,4,5]

// Object destructuring
const { name, age, city = "Unknown" } = { name: "Alice", age: 30 };
console.log(name, age, city); // Alice 30 Unknown

// Renaming
const { name: userName } = { name: "Alice" };
console.log(userName); // Alice

// Function parameter destructuring
function greet({ name, age }) {
  return `Hi ${name}, you are ${age}!`;
}
greet({ name: "Bob", age: 25 }); // "Hi Bob, you are 25!"

Q7. What is the spread operator (...) and how is it used?

The spread operator (...) expands an iterable (array, string, object) into individual elements.

// Merging arrays
const a = [1, 2, 3];
const b = [4, 5, 6];
const merged = [...a, ...b]; // [1,2,3,4,5,6]

// Copying arrays (shallow)
const copy = [...a];

// Spreading into a function
Math.max(...a); // 3

// Merging objects (last write wins)
const defaults = { theme: "dark", lang: "en" };
const user     = { lang: "fr", name: "Alice" };
const config   = { ...defaults, ...user };
// { theme: "dark", lang: "fr", name: "Alice" }

// Spreading a string
const chars = [..."hello"]; // ['h','e','l','l','o']

Q8. What are rest parameters?

Rest parameters allow a function to accept an indefinite number of arguments as an array, using the ... syntax as the last parameter.

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

// Mixed with regular params
function logAll(first, second, ...others) {
  console.log(first);   // "a"
  console.log(second);  // "b"
  console.log(others);  // ["c","d","e"]
}
logAll("a", "b", "c", "d", "e");

Q9. How does DOM manipulation work in JavaScript?

The DOM (Document Object Model) is a tree-like representation of the HTML document. JavaScript can read and modify it using browser APIs.

// Selecting elements
const el     = document.getElementById("myId");
const els    = document.querySelectorAll(".myClass");

// Modifying content
el.textContent = "New text";
el.innerHTML   = "<strong>Bold</strong>"; // use with care (XSS risk)

// Modifying styles and attributes
el.style.color      = "blue";
el.setAttribute("aria-label", "Close");
el.classList.add("active");
el.classList.toggle("open");

// Creating and inserting elements
const div = document.createElement("div");
div.textContent = "Hello!";
document.body.appendChild(div);

// Removing elements
el.remove();

// Event listeners
el.addEventListener("click", (e) => {
  e.preventDefault();
  console.log("Clicked!", e.target);
});

Q10. What is the difference between localStorage and sessionStorage?

Both are Web Storage APIs for storing key-value pairs in the browser, but they differ in persistence:

• localStorage — data persists indefinitely (until explicitly cleared), shared across all tabs/windows of the same origin.
• sessionStorage — data persists only for the duration of the page session (cleared when tab/window is closed), not shared between tabs.
• Both: synchronous, ~5–10 MB limit, string values only.

// localStorage
localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme"); // "dark"
localStorage.removeItem("theme");
localStorage.clear();

// sessionStorage — same API, different lifetime
sessionStorage.setItem("cart", JSON.stringify([{ id: 1 }]));
const cart = JSON.parse(sessionStorage.getItem("cart"));

// Storing objects (stringify/parse required)
const user = { name: "Alice", role: "admin" };
localStorage.setItem("user", JSON.stringify(user));
const stored = JSON.parse(localStorage.getItem("user"));

Q11. What are the key ES6+ features every developer should know?

ES6 (2015) and later versions introduced many features that are now essential in modern JavaScript development:

• Template literals — `Hello, ${name}!`
• Destructuring, Spread / Rest, Arrow functions, let / const.
• Promises, Classes, Modules.
• Optional chaining — user?.address?.city
• Nullish coalescing — value ?? "default"
• Logical assignment — a ||= b, a &&= b, a ??= b

// Optional chaining
const city = user?.address?.city; // undefined instead of TypeError

// Nullish coalescing — only null/undefined triggers default
const port = config.port ?? 3000;

// Logical assignment
let name = null;
name ??= "Anonymous"; // "Anonymous"

// Object shorthand
const x = 1, y = 2;
const point = { x, y }; // { x: 1, y: 2 }

// Computed property names
const key = "name";
const obj = { [key]: "Alice" }; // { name: "Alice" }

Q12. What is a closure? Give a practical example.

A closure is a function that retains access to its outer scope's variables even after the outer function has returned. It is formed every time a function is created, at function creation time.

function makeCounter() {
  let count = 0; // private state

  return {
    increment() { count++; },
    decrement() { count--; },
    value()     { return count; },
  };
}

const counter = makeCounter();
counter.increment();
counter.increment();
console.log(counter.value()); // 2
// count is not accessible from outside — true privacy

Practical uses: module pattern, memoisation, event handlers with context, partial application / currying.

Q13. What is a Promise and what are its states?

A Promise is an object representing the eventual completion or failure of an asynchronous operation. It has three states:

• Pending — initial state, neither fulfilled nor rejected.
• Fulfilled — operation completed successfully.
• Rejected — operation failed.

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) resolve("All good!");
  else         reject(new Error("Something went wrong"));
});

promise
  .then(result => console.log(result))  // "All good!"
  .catch(err   => console.error(err))
  .finally(()  => console.log("Done")); // always runs

// Combining promises
Promise.all([p1, p2, p3])      // all must resolve
Promise.allSettled([p1, p2])   // waits for all, regardless of outcome
Promise.race([p1, p2])         // first to settle wins
Promise.any([p1, p2])          // first to resolve wins

Q14. How does async/await work?

async/await is syntactic sugar over Promises that makes asynchronous code read like synchronous code.

• async makes a function always return a Promise.
• await pauses execution of the async function until the Promise resolves.

// With Promises
function getUser(id) {
  return fetch(`/api/users/${id}`)
    .then(res => res.json())
    .then(data => data)
    .catch(err => console.error(err));
}

// With async/await — cleaner, easier to reason about
async function getUser(id) {
  try {
    const res  = await fetch(`/api/users/${id}`);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error(err);
  }
}

// Parallel execution — don't await sequentially when you don't need to
async function loadAll() {
  const [users, posts] = await Promise.all([
    fetch("/api/users").then(r => r.json()),
    fetch("/api/posts").then(r => r.json()),
  ]);
  return { users, posts };
}

Q15. Explain the 'this' keyword in JavaScript.

The value of this depends on how a function is called, not where it is defined (except with arrow functions).

• Global context — global object (window).
• Object method — object before the dot.
• Constructor call — the newly created instance.
• Explicit binding — call, apply, bind.
• Arrow function — inherits this from lexical scope.

function show() { console.log(this); }

show();             // window (non-strict) / undefined (strict mode)

const user = { name: "Bob", show };
user.show();        // { name: "Bob", show: f }

const bound = show.bind({ name: "Forced" });
bound();            // { name: "Forced" }

Q16. What is the prototype in JavaScript?

Every JavaScript object has an internal link to another object called its prototype. Property lookups walk up this chain until they find the property or reach null.

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  return `${this.name} makes a sound.`;
};

const dog = new Animal("Rex");
console.log(dog.speak()); // "Rex makes a sound."

// prototype chain:
// dog → Animal.prototype → Object.prototype → null

Q17. How does prototypal inheritance work?

JavaScript uses prototypal inheritance: objects inherit directly from other objects via the prototype chain.

function Animal(name) {
  this.name = name;
}
Animal.prototype.eat = function() {
  return `${this.name} eats.`;
};

function Dog(name, breed) {
  Animal.call(this, name); // inherit properties
  this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype); // inherit methods
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  return `${this.name} barks!`;
};

const rex = new Dog("Rex", "Labrador");
console.log(rex.eat());  // "Rex eats."
console.log(rex.bark()); // "Rex barks!"

Q18. How do JavaScript ES6 Classes work?

Classes provide a cleaner syntax for establishing prototypes and inheritance.

class Animal {
  #sound; // private field (ES2022)

  constructor(name, sound) {
    this.name  = name;
    this.#sound = sound;
  }

  speak() {
    return `${this.name} says ${this.#sound}!`;
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name, "Woof");
  }
}

const dog = new Dog("Rex");
console.log(dog.speak());  // "Rex says Woof!"

Q19. Explain Map, Filter, and Reduce with examples.

These are the three most important higher-order array methods:

• map — transforms each element, returns new array.
• filter — selects elements matching a condition.
• reduce — accumulates the array to a single value.

const numbers = [1, 2, 3, 4, 5, 6];

const doubled = numbers.map(n => n * 2); // [2,4,6,8,10,12]
const evens   = numbers.filter(n => n % 2 === 0); // [2,4,6]
const sum     = numbers.reduce((acc, n) => acc + n, 0); // 21

Q20. What are ES Modules and how do they work?

ES Modules (ESM) are the official standard for splitting code into reusable files.

// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }
export default function greet(name) { return `Hi ${name}`; }

// main.js
import greet, { PI, add } from "./math.js";

Q21. What is the difference between a deep copy and a shallow copy?

Shallow copy copies top-level properties (nested objects are shared). Deep copy creates a fully independent clone.

const original = { a: 1, b: { c: 2 } };

// Shallow
const shallow = { ...original };

// Deep
const deep = structuredClone(original);

Q22. Explain call, apply, and bind.

Methods to explicitly set this value.

• call — invokes now, individual arguments.
• apply — invokes now, array of arguments.
• bind — returns new bound function.

function greet(s) { return `${s}, ${this.name}`; }
const user = { name: "Alice" };

greet.call(user, "Hello");
greet.apply(user, ["Hi"]);
const bound = greet.bind(user, "Hey");

Q23. How does the JavaScript Event Loop work?

The event loop handles asynchronous operations in a single-threaded environment.

• Call Stack — execution of sync code.
• Microtask Queue — Promises, drained first.
• Callback Queue — setTimeout, etc., drained after microtasks.

console.log("1");
setTimeout(() => console.log("3"), 0);
Promise.resolve().then(() => console.log("2"));
console.log("4");
// Output: 1, 4, 2, 3

Q24. What is debouncing and when would you use it?

Debouncing delays execution until a certain amount of silence has passed.

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

Q25. What is throttling and how is it different from debouncing?

Throttling ensures a function fires at most once per interval.

function throttle(fn, limit) {
  let waiting = false;
  return (...args) => {
    if (!waiting) {
      fn(...args);
      waiting = true;
      setTimeout(() => waiting = false, limit);
    }
  };
}

Q26. What are memory leaks and how do you prevent them?

Accumulation of unreleased memory.

• Forgotten listeners.
• Uncleared intervals.
• Global variables.
• Detached DOM nodes.

Q27. What are Generators in JavaScript?

Functions that can pause and resume execution using yield.

function* counter() {
  let i = 0;
  while(true) yield i++;
}
const gen = counter();
gen.next().value; // 0

Q28. What is currying and why is it useful?

fn(a, b) → fn(a)(b). Enables partial application and composition.

const add = a => b => a + b;
const add5 = add(5);
add5(3); // 8

Q29. What is the Execution Context in JavaScript?

The environment in which code is executed (Variable/Lexical Environment, this).

• Creation Phase — hoisting, this determination.
• Execution Phase — line-by-line running.

Q30. What are WeakMap and WeakSet?

Key-value/Sets where keys/values are held weakly (garbage-collection friendly).

⚡ Quick Revision Notes