JavaScript Interview Questions: 50 Questions Senior Engineers Actually Get Asked

// Q1: What is a closure and when would you use one?
// A closure is a function that retains access to its outer scope
// even after the outer function has returned.

function makeCounter(initial = 0) {
 let count = initial; // Closed-over variable
 return {
 increment: () => ++count,
 decrement: () => --count,
 value: () => count
 };
}
const counter = makeCounter(10);
counter.increment(); // 11
counter.value(); // 11
// count is inaccessible from outside — private by closure

// Q2: Classic closure bug in loops
for (var i = 0; i < 3; i++) {
 setTimeout(() => console.log(i), 0); // Prints 3, 3, 3 (not 0, 1, 2)
}
// Fix 1: let (block-scoped, new binding per iteration)
for (let i = 0; i < 3; i++) {
 setTimeout(() => console.log(i), 0); // 0, 1, 2
}
// Fix 2: IIFE to capture value
for (var i = 0; i < 3; i++) {
 ((j) => setTimeout(() => console.log(j), 0))(i); // 0, 1, 2
}

// Q3: What is the output and why?
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// Output: 1, 4, 3, 2
// Why:
// - 1, 4 = synchronous (call stack)
// - 3 = microtask queue (Promises) — runs BEFORE macrotasks
// - 2 = macrotask queue (setTimeout) — runs after all microtasks

// Q4: What is the difference between microtasks and macrotasks?
// Microtasks: Promise callbacks, queueMicrotask(), MutationObserver
// Macrotasks: setTimeout, setInterval, setImmediate, I/O, UI events
// Microtask queue drains COMPLETELY before next macrotask runs

// Q5: How does prototypal inheritance work?
const animal = { breathe() { return 'breathing'; } };
const dog = Object.create(animal);
dog.bark = function() { return 'woof'; };

dog.bark(); // 'woof' — own property
dog.breathe(); // 'breathing' — from prototype chain

// Prototype chain: dog → animal → Object.prototype → null

// Q6: Difference between __proto__, prototype, Object.getPrototypeOf
// __proto__: instance property pointing to prototype (deprecated, use getPrototypeOf)
// .prototype: property on constructor functions only
// Object.getPrototypeOf(obj): correct way to get prototype

function Dog() {}
const d = new Dog();
Object.getPrototypeOf(d) === Dog.prototype; // true
Object.getPrototypeOf(Dog.prototype) === Object.prototype; // true

// Q7: What does `this` refer to in each case?
// Rule 1: Default binding — global object (or undefined in strict mode)
function alone() { console.log(this); } // window or undefined

// Rule 2: Implicit binding — the object before the dot
const obj = { name: 'obj', getName() { return this.name; } };
obj.getName(); // 'obj' — this = obj

// Rule 3: Explicit binding — call, apply, bind
function greet(greeting) { return greeting + ' ' + this.name; }
greet.call({ name: 'Alice' }, 'Hello'); // 'Hello Alice'

// Rule 4: Arrow functions — inherit this from enclosing scope
const timer = {
 count: 0,
 start() {
 setInterval(() => this.count++, 1000); // Arrow: this = timer
 }
};

// Rule 5: new binding — newly created object
function Person(name) { this.name = name; }
const p = new Person('Bob'); // this inside = new object assigned to p

// Q8: What is hoisting?
// Variables declared with var are hoisted to top of scope and initialized to undefined
// Functions are fully hoisted (declaration + body)
// let/const are hoisted but NOT initialized (Temporal Dead Zone)

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

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 5;

console.log(fn()); // Works! Function declaration fully hoisted
function fn() { return 'hello'; }

console.log(arrow()); // TypeError: arrow is not a function
var arrow = () => 'hello'; // var hoisted as undefined

// Q9: Name 4 common JavaScript memory leak patterns

// Leak 1: Global variables
function bad() { leak = 'I am global'; } // Missing var/let/const

// Leak 2: Forgotten event listeners
const el = document.getElementById('btn');
const handler = () => doSomething();
el.addEventListener('click', handler);
// Fix: el.removeEventListener('click', handler) on cleanup

// Leak 3: Closures holding references
function outer() {
 const bigData = new Array(1000000);
 return () => bigData[0]; // bigData kept alive by closure
}

// Leak 4: Detached DOM nodes
const detached = document.createElement('div');
const map = new Map();
map.set(detached, 'data'); // Map holds reference even if removed from DOM
// Fix: use WeakMap — key is garbage collected when element removed
const wm = new WeakMap();
wm.set(detached, 'data'); // Auto-cleaned when detached is GC'd