Closures in Javascript - Mini Project: Build & Apply

Understanding Closures in JavaScript

📖 Scenario: Imagine you are building a simple counter app. You want to create counters that remember their own counts even after you use them multiple times. This is like having a personal tally for each counter.

🎯 Goal: You will build a function that creates counters using closures. Each counter will keep its own count and increase it when called.

📋 What You'll Learn

Create a function that returns another function

Use a variable inside the outer function to store the count

The inner function should increase and return the count

Create at least one counter using the function

Show the count increasing by calling the counter multiple times

💡 Why This Matters

🌍 Real World

Closures help keep data private and create functions with memory, like counters, timers, or settings in apps.

💼 Career

Understanding closures is important for JavaScript developers to write clean, efficient, and bug-free code that manages state safely.

1

Create the outer function with a count variable

Write a function called createCounter that declares a variable count and sets it to 0 inside the function.

Javascript

function createCounter() {
  // Your code here
}

Need a hint?

Remember to use let to declare the count variable inside the function.

2

Return an inner function that increases count

Inside the createCounter function, write a return statement that returns a new function. This inner function should increase count by 1 and return the new value.

Javascript

function createCounter() {
  let count = 0;
  // Return a function that increases and returns count
  // Your code here
}

Need a hint?

The inner function should access and change the count variable from the outer function.

3

Create a counter and call it multiple times

Create a variable called myCounter and set it to the result of calling createCounter(). Then call myCounter() three times, storing each result in variables first, second, and third.

Javascript

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

// Create myCounter and call it three times
// Your code here

Need a hint?

Call createCounter() once and save it to myCounter. Then call myCounter() three times and save each result.

4

Print the results to see the counts

Use console.log to print the values of first, second, and third on separate lines.

Javascript

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

const myCounter = createCounter();
const first = myCounter();
const second = myCounter();
const third = myCounter();

// Print the counts
// Your code here

Need a hint?

Use console.log three times to print each count value on its own line.