Closures! Closures! Closures!

shavonharrisdev

Shavon Harris

Posted on February 21, 2024

Closures! Closures! Closures!

From what I've seen in these coding challenges, you can never have enough practice with closures. So let's dive into an example of how to tackle them.

But First, What's a Closure Again?

Imagine a big robot in a kitchen, whipping up an omelet. It assigns each task—chopping onions, cracking eggs, adding spices—to a fleet of tiny robots. These mini-robots venture off to their stations, but no matter where they are in the kitchen, they never forget their main goal, thanks to a recipe card (closure) that remembers everything the big robot told them.

In programming terms, a closure is just like that recipe card—a function that remembers the variables from where it was created, no matter where you use it later.

The Counter Challenge

We're given a task: start with an integer n, and create a counter function that initially returns this integer. Then, each time you call it, it should return n + 1.

What to Do First?

List out what we know:

  • Parameter: an integer n
  • Return: a function called counter

If I'm returning a function, I know that I'm dealing with some sort of closure, so let's set that up.

// Create a main function 
function createCounter(n) {
   // Return the counter function
   return function counter() {
      console.log(n);
   };
}
Enter fullscreen mode Exit fullscreen mode

Now, let's test our setup:

const myCounter = createCounter(10); // We've got our recipe card!
myCounter(); // Prints out 10
Enter fullscreen mode Exit fullscreen mode

Something is not quite right though. We're not incrementing the integer n at all. Luckily, we can use an operator to easily increment.

Understanding n++

Using n++ is like telling one of our mini-robots to add a pinch of salt and then prepare to add another pinch the next time around. It increments n but gives us the value before the increment.

Let's tweak our function:

function createCounter(n) {
    // Return the counter function
    return function counter() {
        return n++;
    };
}

const myCounter = createCounter(10);
console.log(myCounter()); // 10
console.log(myCounter()); // 11
console.log(myCounter()); // 12

Enter fullscreen mode Exit fullscreen mode

Making It Stick

  • Try It Out: Play around with this code in the developer tools or on a site like CodePen? Hmmm. What happens if you use ++n instead of n++?

Challenge Yourself: Can you modify the createCounter function to start counting down instead of up?

Wrapping Up

Closures might seem confusing at first, I also had a really hard time grasping the concept, but with a bit of practice, they become a really useful tool in JavaScript. They're like having a secret recipe that only your function knows about, allowing you to write more predictable and bug-free code.

Keep coding!

💖 💪 🙅 🚩
shavonharrisdev
Shavon Harris

Posted on February 21, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related