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);
   };
}

Now, let's test our setup:

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

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

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!