Closures Deep Dive: Interview Questions in JavaScript

Closures Deep Dive: Interview Questions in JavaScript

Advanced closure interview questions go beyond the basics. Here are the tricky ones with answers.

Q1: What is the output?

function createFunctions() {
  const result = [];
  for (var i = 0; i < 3; i++) {
    result.push(function () { return i; });
  }
  return result;
}
const fns = createFunctions();
console.log(fns.map(f => f()));
``
**Answer**: `[3, 3, 3]`. All closures share one `i` (var). Fix with `let`.

### Q2: Implement a function that can only be called once.

```js
function once(fn) {
  let done = false;
  let result;
  return (...args) => {
    if (done) return result;
    done = true;
    result = fn(...args);
    return result;
  };
}
``
### Q3: Implement a memoize function.

```js
function memoize(fn) {
  const cache = {};
  return (...args) => {
    const key = JSON.stringify(args);
    if (!(key in cache)) cache[key] = fn(...args);
    return cache[key];
  };
}
``
### Q4: What is the output?

```js
function counter() {
  let count = 0;
  return {
    increment: () => ++count,
    getCount: () => count,
  };
}
const c = counter();
const { increment, getCount } = c;
increment();
increment();
console.log(getCount());
``
**Answer**: `2`. Both `increment` and `getCount` close over the same `count`. Destructuring does not break the closure.

### Q5: Implement a debounce function.

```js
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}
``
### Q6: Implement a throttle function.

```js
function throttle(fn, delay) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= delay) {
      last = now;
      fn(...args);
    }
  };
}
``
### Q7: What is the output?

```js
function makeAdder(x) {
  return function (y) {
    return function (z) {
      return x + y + z;
    };
  };
}
const add5 = makeAdder(5);
const add5and3 = add5(3);
console.log(add5and3(2)); // 10
``
**Answer**: `10`. Each nested function closes over its parent's variables. `x=5`, `y=3`, `z=2` -> `5+3+2=10`.

### Q8: Explain closures and data hiding with an example.

```js
function createUser(name) {
  let password = "secret";
  return {
    getName: () => name,
    authenticate: (pwd) => pwd === password,
  };
}
const user = createUser("Kunal");
user.password;     // undefined (hidden)
user.authenticate("secret"); // true
``
`password` is private. Only `authenticate` can check it.

### Q9: What is a memory leak caused by closures? Give an example.

```js
const handlers = [];
function setup() {
  const big = new Array(1_000_000);
  handlers.push(() => big.length);
}
setup(); // big stays alive because the handler closes over it
``
Fix: remove the handler when done, or extract only what you need.

### Q10: How do closures work with `this`?

Regular functions: `this` is determined at call time, so a closure does not capture `this` (unless the closure is an arrow function). Arrow functions: `this` is lexical, so the arrow captures `this` from the enclosing scope.

### The Takeaway

Advanced closure questions test: the loop bug (var vs let), utility functions (once, memoize, debounce, throttle), nested closures, data hiding, memory leaks, and closures + `this`. Practice implementing each utility from scratch and explaining the lexical environment that makes it work.