Closures in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a closure that returns a function adding a fixed number.

Javascript

function makeAdder(x) {
  return function(y) {
    return x [1] y;
  };
}

const add5 = makeAdder(5);
console.log(add5(3));

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

A+

B-

C*

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction or multiplication instead of addition.

The closure captures x and adds it to y using the + operator.

2fill in blank

medium

Complete the code to create a counter using closure that increments by 1 each call.

Javascript

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

const counter = createCounter();
console.log(counter());

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

A-=

B*=

C+=

D/=

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction or multiplication instead of addition assignment.

The closure updates count by adding 1 each time the returned function is called using +=.

3fill in blank

hard

Complete the code to demonstrate how closures capture the loop variable correctly with `let`, returning i + 1 for each function.

Javascript

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

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

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

A+

B-

C*

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction or multiplication instead of addition.

The closure captures i correctly due to block scoping with let and adds 1 to it using the + operator.

4fill in blank

hard

Complete the code to create a closure that filters numbers greater than 5.

Javascript

function filterGreaterThanFive(arr) {
  return arr.filter(function(num) {
    return num [1] 5;
  });
}

const result = filterGreaterThanFive([3, 7, 2, 9]);
console.log(result);

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

A<

B>

C===

D!==

Attempts:

3 left

💡 Hint

Common Mistakes

Using less than or equality operators instead of greater than.

The function filters numbers greater than 5 using the > operator.

5fill in blank

hard

Fill all three blanks to create a closure that maps words to their lengths if length is greater than 3.

Javascript

function mapLongWords(words) {
  return Object.fromEntries(
    words.filter(function([1]) {
      return [1].[2] > 3;
    })
    .map(function([3]) {
      return [[3], [3].[2]];
    })
  );
}

const result = mapLongWords(['cat', 'elephant', 'dog', 'giraffe']);
console.log(result);

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

Aword

Blen

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variable names or properties for length.

The code uses filter and map with closures to create an object mapping each word to its length if the length is greater than 3, then Object.fromEntries converts the array of entries to an object.

Practice

1. What is a closure in JavaScript?

easy

A. A function that has no parameters

B. A function that runs only once

C. A function that returns another function without variables

D. A function that remembers variables from its creation context

Solution

1. Step 1: Understand closure definition

   A closure is a function that keeps access to variables from the place where it was created, even after that place has finished running.

2. Step 2: Match definition to options

   A function that remembers variables from its creation context correctly describes this behavior, while others describe unrelated concepts.

3. Final Answer:

   A function that remembers variables from its creation context -> Option D

4. Quick Check:

   Closure = function remembering variables [OK]

Hint: Closures remember variables from where they were made [OK]

Common Mistakes:

• Thinking closures are functions without parameters
• Confusing closures with immediately invoked functions
• Believing closures only run once

2. Which of the following is the correct syntax to create a closure in JavaScript?

easy

A. function outer() { let x = 5; function inner() { return x; } }

B. function outer() { let x = 5; return x; }

C. function outer() { let x = 5; return function inner() { return x; } }

D. function outer() { return function() { let x = 5; } }

Solution

1. Step 1: Identify closure syntax

   A closure requires an inner function that accesses variables from the outer function and is returned so it can be used later.

2. Step 2: Check options for correct closure

   function outer() { let x = 5; return function inner() { return x; } } returns an inner function that uses outer variable x, forming a closure. Others either don't return the function or don't access outer variables correctly.

3. Final Answer:

   function outer() { let x = 5; return function inner() { return x; } } -> Option C

4. Quick Check:

   Return inner function accessing outer variable [OK]

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

Common Mistakes:

• Not returning the inner function
• Returning only the variable, not a function
• Defining inner function but not using outer variables

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

function makeCounter() {
  let count = 0;
  return function() {
    count += 1;
    return count;
  };
}
const counter = makeCounter();
console.log(counter());
console.log(counter());

medium

A. 1 and 2

B. 0 and 1

C. undefined and undefined

D. 1 and 1

Solution

1. Step 1: Understand closure behavior in makeCounter

   The inner function increments count and returns it. The variable count is remembered by the closure.

2. Step 2: Trace the calls to counter()

   First call: count = 0 + 1 = 1, returns 1. Second call: count = 1 + 1 = 2, returns 2.

3. Final Answer:

   1 and 2 -> Option A

4. Quick Check:

   Closure keeps count incrementing: 1, 2 [OK]

Hint: Closure keeps variable state between calls [OK]

Common Mistakes:

• Thinking count resets each call
• Expecting output 1 and 1
• Confusing closure with global variable

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]());
console.log(functions[1]());

medium

A. All functions return 3 instead of 0, 1, 2

B. Syntax error due to missing semicolons

C. Functions return undefined

D. Functions throw a ReferenceError

Solution

1. Step 1: Identify loop variable scope

   The loop uses var i, which is function-scoped, so all inner functions share the same i.

2. Step 2: Understand closure captures final i value

   After loop ends, i is 3. All functions return 3, not 0, 1, 2 as expected.

3. Final Answer:

   All functions return 3 instead of 0, 1, 2 -> 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 ReferenceError or undefined

5. How can you fix the following code so each function remembers its own value of i?

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

hard

A. Use var but call the function immediately

B. Change var to let in the for loop declaration

C. Return i directly instead of a function

D. Declare i as a global variable

Solution

1. Step 1: Understand block scope with let

   Using let in the for loop creates a new binding of i for each iteration, so closures capture different i values.

2. Step 2: Compare with var behavior

   var is function-scoped, so all closures share the same i. Changing to let fixes this by giving each iteration its own i.

3. Final Answer:

   Change var to let in the for loop declaration -> Option B

4. Quick Check:

   let in loop creates separate i per iteration [OK]

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

Common Mistakes:

• Trying to fix by making i global
• Returning i instead of function
• Using var with immediate call but misunderstanding closures