Master JavaScript Closures: 10 Must‑Know Interview Questions & Answers

Closure is one of the most powerful yet confusing concepts in JavaScript and a frequent topic in front‑end interviews. This article presents ten typical interview questions about closures, each with a standard answer, an advanced answer, and illustrative code.

1. What is a closure? Explain in your own words

Standard answer: A closure is a function that has access to variables from another function’s scope. More precisely, a closure consists of the function together with the lexical environment in which it was created, which contains any local variables that were in scope at that time.

Advanced answer: A closure is essentially a function returned from another function that "remembers" the outer function’s scope even after the outer function has finished executing. Its core features are:

Can access variables of the outer function.

Retains and can access its lexical scope even when executed outside that scope.

Closures are essential for modularization, data encapsulation, and implementing private variables in JavaScript.

Code example:

function createCounter() {
  let count = 0; // this variable is "captured" by the closure
  return function() {
    count += 1;
    return count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

2. Can closures cause memory leaks? Why?

Standard answer: Closures themselves do not cause memory leaks, but misuse can. When a closure retains references to large objects or data that are no longer needed, the garbage collector cannot reclaim that memory, leading to leaks.

Advanced answer: In older IE versions (IE6/IE7) the garbage‑collection algorithm had defects, so closures that referenced DOM elements could easily leak memory. Modern browsers reclaim closures normally once there are no remaining references.

Typical leak scenarios:

The closure keeps a reference to a large data structure that is no longer needed.

Creating closures in event handlers without removing the listeners.

Using closures inside timers without clearing the timers.

Code example:

function potentialLeak() {
  const largeData = new Array(1000000).fill('potential memory leak');
  return function processSomeData() {
    // use a small part of largeData
    return largeData[0];
  };
}
let process = potentialLeak();
console.log(process()); // "potential memory leak"
process = null; // allow garbage collection

3. Explain the output of the following code and why

for (var i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

Standard answer: The output prints the number 6 five times.

Reason: The callback created by setTimeout forms a closure that references the variable i. Because var is function‑scoped, after the loop finishes i equals 6, and all callbacks see the same i value.

Advanced answer: To get the expected 1‑5 output you can use any of the following solutions:

Wrap the body in an IIFE that captures the current value.

for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function() { console.log(j); }, 1000);
  })(i);
}

Use let to create a block‑scoped variable.

for (let i = 1; i <= 5; i++) {
  setTimeout(function() { console.log(i); }, 1000);
}

Pass the loop index as the third argument to setTimeout.

for (var i = 1; i <= 5; i++) {
  setTimeout(function(j) { console.log(j); }, 1000, i);
}

4. How to use a closure to implement private variables?

Standard answer: JavaScript (prior to ES2022 private fields) does not have native private variable syntax, but a closure can simulate private variables by encapsulating them inside a function scope and exposing only the necessary interface.

Advanced answer: This technique underlies the module pattern and revealing‑module pattern, providing encapsulation, avoiding global namespace pollution, and improving code safety and maintainability.

Code example:

5. What is the relationship between closures and the this keyword?

Standard answer: A closure can capture variables from an outer function, but it does not automatically capture this. In JavaScript, this is determined at call time, not at definition time, so the this inside a closure may differ from expectations.

Advanced answer: When using this inside a closure, you must pay attention to its binding. Common solutions include:

Assign the outer this to a variable such as self or that.

Use an ES6 arrow function, which inherits this from the surrounding scope.

Explicitly bind this with bind.

Call the closure with call or apply to set this.

Code example:

6. What is the "module pattern" and how does it use closures?

Standard answer: The module pattern is a design pattern that uses a closure to create encapsulation and private state. It employs an immediately‑invoked function expression (IIFE) to create a private scope and returns a public API, hiding internal implementation details.

Advanced answer: Before ES6 modules, the module pattern was the most common way to structure JavaScript code. Its key benefits are encapsulation, namespace reduction, reusability, and explicit dependency management.

Encapsulation: protects variables and functions from external access.

Namespace: reduces global variables and avoids naming conflicts.

Reuse: creates maintainable, reusable code.

Dependency management: declares dependencies inside the module.

ES6 modules have largely superseded the classic module pattern, but understanding it is still valuable for grasping closures and scope.

Code example:

7. Explain the output of the following code and fix the problem

Standard answer: The output is three times the number 3 instead of the expected 0, 1, 2.

Reason: The closure captures the variable itself, not its value. After the loop finishes, i equals 3, so all functions return 3.

Advanced answer: This is the classic "loop trap" with closures. Solutions include:

Use an IIFE to create a new scope for each iteration.

Replace var with let for block‑scoped indices.

Use a function factory that returns a fresh closure per iteration.

8. How do closures affect performance and what are optimization strategies?

Standard answer: Closures can impact performance in three ways:

Memory usage: they keep references to outer variables, increasing memory consumption.

Garbage collection: variables captured by a closure are not reclaimed until the closure itself is unreachable.

Scope‑chain lookup: accessing outer variables requires traversing the scope chain, which is slower than accessing local variables.

Advanced answer: Optimization strategies:

Limit the closure’s scope to only the variables it truly needs.

Explicitly release references (set to null) when the closure is no longer required.

Avoid creating many closures inside performance‑critical loops; consider object pools or other patterns.

Use closures for memoization to cache results and improve speed.

Avoid excessive closure use on hot code paths; keep hot paths simple.

Code example (before/after):

9. Explain the "static scope" characteristic of closures with an example

Standard answer: JavaScript uses lexical (static) scoping, meaning a function’s scope is determined when the function is defined, not when it is called. Closures rely on this static scope to remember the environment in which they were created.

Advanced answer: The difference between static and dynamic scope lies in when variable resolution occurs. In static scope, the location is known at compile time; in dynamic scope, it depends on the call stack at runtime.

Static scope: determined during code compilation, independent of call location.

Dynamic scope: determined at runtime based on the call stack.

Example demonstrating that a closure accesses the variables from its defining lexical environment, not from the environment where it is later invoked:

let globalVar = 'global';
function outerFunc() {
  let outerVar = 'outer';
  function innerFunc() {
    console.log(outerVar); // "outer"
    console.log(globalVar); // "global"
  }
  return innerFunc;
}
function executeFunc() {
  let outerVar = 'different value';
  let globalVar = 'different global';
  const inner = outerFunc();
  inner(); // still logs "outer" and "global"
}
executeFunc();

10. How to implement currying with closures and explain its use cases

Standard answer: Currying transforms a function that takes multiple arguments into a sequence of functions each taking a single argument. Closures enable this by remembering previously supplied arguments.

Advanced answer: Currying improves parameter reuse, enables delayed execution, and enhances readability. It is widely used in functional programming, configuration functions, event handling, logging, and API request building.

Code example:

// Simple currying implementation
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}
function add(a, b, c) { return a + b + c; }
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6
console.log(curriedAdd(1)(2, 3)); // 6

// Real‑world example: configurable logger
function log(level, module, message) {
  console.log(`[${level}] [${module}] ${message}`);
}
const curriedLog = curry(log);
const errorLog = curriedLog('ERROR');
const userErrorLog = errorLog('USER');
userErrorLog('Username not found'); // [ERROR] [USER] Username not found
userErrorLog('Password incorrect');   // [ERROR] [USER] Password incorrect

// API request example
function request(baseUrl, endpoint, data) {
  console.log(`Fetching ${baseUrl}${endpoint} with data:`, data);
  // actual request code …
}
const curriedRequest = curry(request);
const apiRequest = curriedRequest('https://api.example.com');
const userApi = apiRequest('/users');
userApi({ id: 123 }); // Fetching https://api.example.com/users with data: {id: 123}
userApi({ name: 'test' }); // Fetching https://api.example.com/users with data: {name: 'test'}

Feel free to add more content.