Practical closure use cases in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a closure that remembers the initial value.

Javascript

function createCounter() {
  let count = 0;
  return function() {
    count [1] 1;
    return count;
  };
}

Drag options to blanks, or click blank then click option'

A-=

B+=

C*=

D/=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-' instead of '+' causes the count to decrease.

Using '*' or '/' changes the count incorrectly.

The closure increments the count by 1 each time the inner function is called using '+=' operator.

2fill in blank

medium

Complete the code to create a function that returns a personalized greeting using closure.

Javascript

function greet(name) {
  return function() {
    return `Hello, [1]!`;
  };
}

Drag options to blanks, or click blank then click option'

Athis.name

Bgreet

Cname

Dperson

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'this.name' does not work because 'this' is not bound here.

Using 'person' or 'greet' are undefined in this scope.

The inner function uses the 'name' parameter from the outer function to create a personalized greeting.

3fill in blank

hard

Fix the error in the closure that tries to capture loop variable values.

Javascript

function createFunctions() {
  let funcs = [];
  for (var i = 0; i < 3; i++) {
    funcs.push(function() {
      return i;
    });
  }
  return funcs;
}

const functions = createFunctions();
console.log(functions[0]() === [1]);

Drag options to blanks, or click blank then click option'

A0

B1

Cundefined

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Expecting the functions to return 0, 1, 2 instead of 3.

Not understanding how 'var' scope works in loops.

Using 'var' causes all functions to share the same 'i' which ends at 3 after the loop.

4fill in blank

hard

Fill both blanks to fix the closure capturing loop variable problem using let.

Javascript

function createFunctions() {
  let funcs = [];
  for ([1] i = 0; i < 3; i++) {
    funcs.push(function() {
      return [2];
    });
  }
  return funcs;
}

Drag options to blanks, or click blank then click option'

Alet

Bvar

Ci

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'var' causes all functions to share the same variable.

Returning a fixed number instead of the loop variable.

Using 'let' for 'i' creates a new binding each loop iteration, so each function captures its own 'i'.

5fill in blank

hard

Fill all three blanks to create a counter with private state and a reset method.

Javascript

function createCounter() {
  let count = 0;
  return {
    increment() {
      count [1] 1;
      return count;
    },
    reset() {
      count = [2];
    },
    getCount() {
      return [3];
    }
  };
}

Drag options to blanks, or click blank then click option'

A+=

B0

Ccount

D-=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-=' instead of '+=' for increment.

Resetting count to wrong value.

Returning wrong variable in getCount.

The increment method adds 1 to count, reset sets count to 0, and getCount returns the current count.

Practice

1. What is the main benefit of using closures in JavaScript?

easy

A. They make code run faster by optimizing loops.

B. They allow functions to remember variables from their creation context.

C. They automatically free memory when variables are no longer used.

D. They let you write code without using functions.

Solution

1. Step 1: Understand closure concept

   Closures let a function remember variables from the place where it was created, even after that place has finished running.

2. Step 2: Compare options

   Only They allow functions to remember variables from their creation context. correctly describes this key feature. Other options describe unrelated or incorrect ideas.

3. Final Answer:

   They allow functions to remember variables from their creation context. -> Option B

4. Quick Check:

   Closure = Remember variables [OK]

Hint: Closures remember variables where functions are made [OK]

Common Mistakes:

• Thinking closures speed up code automatically
• Confusing closures with garbage collection
• Believing closures remove the need for functions

2. Which of the following is the correct syntax to create a closure that keeps a private counter?

easy

A. function counter() { return count++; let count = 0; }

B. function counter() { var count = 0; count++; return count; }

C. let count = 0; function counter() { count++; return count; }

D. function counter() { let count = 0; return function() { count++; return count; }; }

Solution

1. Step 1: Identify closure pattern

   function counter() { let count = 0; return function() { count++; return count; }; } defines a function that returns another function which accesses the variable 'count' inside its scope, creating a closure.

2. Step 2: Check other options

   function counter() { var count = 0; count++; return count; } increments count but does not return a function, so no closure. let count = 0; function counter() { count++; return count; } uses a global variable, not private. function counter() { return count++; let count = 0; } has syntax error (return before variable declaration).

3. Final Answer:

   function counter() { let count = 0; return function() { count++; return count; }; } -> Option D

4. Quick Check:

   Closure = function inside function with private variable [OK]

Hint: Closure needs inner function accessing outer variable [OK]

Common Mistakes:

• Returning value instead of function for closure
• Using global variables instead of private ones
• Placing return before variable declaration

3. What will be the output of the following code?

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}
const add5 = makeAdder(5);
console.log(add5(3));

medium

A. 53

B. NaN

C. 8

D. undefined

Solution

1. Step 1: Understand makeAdder function

   makeAdder returns a function that adds its argument y to x, which is remembered via closure.

2. Step 2: Calculate add5(3)

   add5 is makeAdder(5), so x=5. Calling add5(3) returns 5 + 3 = 8.

3. Final Answer:

   8 -> Option C

4. Quick Check:

   Closure adds remembered x to y = 8 [OK]

Hint: Closure remembers x=5, adds y=3 to get 8 [OK]

Common Mistakes:

• Concatenating numbers as strings
• Forgetting closure remembers x
• Expecting undefined or NaN

4. Find the error in this closure example:

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

medium

A. All functions return 3 instead of 0, 1, 2 due to var scoping.

B. Syntax error because of missing semicolons.

C. functions array is empty because push is not called.

D. The code runs correctly and prints 0.

Solution

1. Step 1: Analyze loop variable scope

   Using var for i means one shared variable. All functions capture the same i, which after loop ends is 3.

2. Step 2: Understand closure effect

   Each function returns i, but i is 3 at call time, so all return 3, not 0,1,2.

3. Final Answer:

   All functions return 3 instead of 0, 1, 2 due to var scoping. -> Option A

4. Quick Check:

   var in loop causes shared i = 3 [OK]

Hint: var in loop shares variable; use let for block scope [OK]

Common Mistakes:

• Assuming each function captures separate i
• Thinking semicolons cause error
• Expecting functions array to be empty

5. How can you modify this code to create an array of functions each returning its own index?

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

hard

A. Replace var with let in the for loop declaration.

B. Declare i with var but add a closure with an IIFE inside the loop.

C. Use a global variable instead of i.

D. No change needed; code works as is.

Solution

1. Step 1: Understand problem with var

   var is function-scoped, so all functions share same i, which ends at 3.

2. Step 2: Fix with let for block scope

   Replacing var with let makes i block-scoped, so each iteration has its own i captured by closure.

3. Final Answer:

   Replace var with let in the for loop declaration. -> Option A

4. Quick Check:

   let creates separate i per loop iteration [OK]

Hint: Use let in loops to create separate closure variables [OK]

Common Mistakes:

• Using global variables causing shared state
• Thinking IIFE is only solution
• Believing code works without changes