Practical closure use cases in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Closure and private variables

What is the output of this code when calling counter.increment() three times and then counter.get()?

Javascript

function createCounter() {
  let count = 0;
  return {
    increment() {
      count++;
    },
    get() {
      return count;
    }
  };
}
const counter = createCounter();
counter.increment();
counter.increment();
counter.increment();
console.log(counter.get());

A 0

B TypeError

C undefined

D 3

💡 Hint

Think about how the variable count is kept inside the function and accessed only through returned methods.

The variable count is private inside createCounter. Each call to increment() increases it by 1. After three increments, get() returns 3.

❓ Predict Output

intermediate

Closure capturing loop variable

What will be logged by the following code?

Javascript

function createFunctions() {
  const funcs = [];
  for (var i = 0; i < 3; i++) {
    funcs.push(function() {
      return i;
    });
  }
  return funcs;
}
const functions = createFunctions();
console.log(functions[0]());
console.log(functions[1]());
console.log(functions[2]());

A 3 3 3

B 0 1 2

C undefined undefined undefined

D 0 0 0

💡 Hint

Remember that var is function-scoped, not block-scoped.

The variable i is shared in the loop because it is declared with var. When the functions run, i is 3, so all return 3.

❓ Predict Output

advanced

Fixing closure in loop with IIFE

What is the output of this fixed code?

Javascript

function createFunctions() {
  const funcs = [];
  for (var i = 0; i < 3; i++) {
    (function(j) {
      funcs.push(function() {
        return j;
      });
    })(i);
  }
  return funcs;
}
const functions = createFunctions();
console.log(functions[0]());
console.log(functions[1]());
console.log(functions[2]());

A undefined undefined undefined

B 3 3 3

C 0 1 2

D TypeError

💡 Hint

The IIFE captures the current value of i as j for each function.

The IIFE creates a new scope for each iteration, capturing the current i value as j. Each function returns its own j value.

🧠 Conceptual

advanced

Why use closures for data privacy?

Which of the following best explains why closures are used to create private data in JavaScript?

A Closures allow functions to access variables from their outer scope even after the outer function has finished executing.

B Closures prevent any function from accessing variables outside its own scope.

C Closures automatically encrypt variables to keep them private.

D Closures make variables global so all functions can share them.

💡 Hint

Think about how inner functions remember variables from where they were created.

Closures keep the variables alive in the outer function's scope, allowing inner functions to access them even after the outer function returns, enabling data privacy.

❓ Predict Output

expert

Closure with asynchronous callbacks

What will be the output of this code snippet?

Javascript

function delayedLogger() {
  for (let i = 0; i < 3; i++) {
    setTimeout(() => {
      console.log(i);
    }, 100);
  }
}
delayedLogger();

A undefined undefined undefined

B 0 1 2

C 3 3 3

D 0 0 0

💡 Hint

Consider how let differs from var in loops and closures.

Using let creates a new binding for each loop iteration, so each callback logs its own i value.