Practical closure use cases in Javascript - Mini Project: Build & Apply

Practical closure use cases

📖 Scenario: Imagine you are building a simple counter app that keeps track of how many times a button is clicked. You want to keep the count private and only allow it to be changed through specific functions.

🎯 Goal: Build a counter using closures in JavaScript that keeps the count private and provides functions to increment and get the current count.

📋 What You'll Learn

Create a function that returns two functions: one to increment the count and one to get the current count.

Use a closure to keep the count variable private inside the function.

Demonstrate the usage by incrementing the count a few times and printing the current count.

💡 Why This Matters

🌍 Real World

Closures are used in web apps to keep data private and avoid accidental changes from outside code.

💼 Career

Understanding closures helps you write safer, cleaner JavaScript code, a key skill for frontend and backend developers.

1

Create the counter function with a private count variable

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

Javascript

# Your code here
function createCounter() {
    // Your code here
}

Need a hint?

Think of count as a secret number only createCounter can see.

2

Add increment and get functions inside createCounter

Inside createCounter, create two functions: increment that adds 1 to count, and getCount that returns the current count. Return an object with these two functions as properties.

Javascript

function createCounter() {
    let count = 0;
    // Your code here
}

Need a hint?

These inner functions can access count because of closure.

3

Create a counter instance and use increment

Create a variable called counter and set it to the result of calling createCounter(). Then call counter.increment() three times to increase the count.

Javascript

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

// Your code here

Need a hint?

Each call to increment adds one to the private count.

4

Print the current count using getCount

Use console.log to print the result of counter.getCount().

Javascript

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

const counter = createCounter();
counter.increment();
counter.increment();
counter.increment();

// Your code here

Need a hint?

The count should be 3 after three increments.