I came across an interesting question on Reddit. Someone was having trouble understanding why two different approaches to counting values in JavaScript didn’t behave the same way.
The Reddit user expected that two similar ways of incrementing a counter would reset the count to zero, but they didn’t.
function createCount() { let count = 0;
function increment() { count++; console.log(`Count increased to ${count}`); }
return { increment };}
// First approachcreateCount().increment(); // Count increased to 1createCount().increment(); // Count increased to 1 again
// Second approachlet counter = createCount();counter.increment(); // Count increased to 1counter.increment(); // Count increased to 2The Reddit user was confused. They thought the first and second approach should behave the same way, but they don’t. The first approach resets the count to zero every time, while the second approach continues from where it left off.
Why Does This Happen?
The key difference lies in closures. If that word makes your head spin, don’t worry—I’ll break it down.
A closure in JavaScript happens when a function can “remember” and access variables from the outer scope, even after that outer function has finished executing. This allows the inner function to maintain access to the variables in place when the function was created.
function outerFunction() { let outerVariable = 'I am from outer scope!';
function innerFunction() { console.log(outerVariable); // It can access outerVariable }
return innerFunction;}
const closureFunction = outerFunction(); // outerFunction runs and returns innerFunctionclosureFunction(); // logs: "I am from outer scope!"outerFunction()is called, which creates a local variableouterVariableand defines aninnerFunction.outerFunction()then returnsinnerFunction, but here’s the magic part: even though outerFunction has finished running, theinnerFunctioncan still accessouterVariable. This is because of closure.
The innerFunction “remembers” the environment where it was created, which includes the outerVariable variable. When you call closureFunction(), it can still access and log the outerVariable even though the outerFunction() has completed execution.
Simple Counter Using Closures
function createCounter() { let count = 0; // This variable is in the outer scope
return function() { count++; console.log(`Current count: ${count}`); };}
const counter = createCounter();counter(); // Current count: 1counter(); // Current count: 2counter(); // Current count: 3createCounter()defines a localcountvariable and returns a function that increments and logs the value ofcount.- Even after
createCounter()finishes, the returned function still has access to the count variable thanks to closure. So, every time you callcounter(), it updates the same count variable, preserving the value between calls.
Closure with Parameters
Let’s expand the counter to take an initial value as a parameter.
function createCounter(startValue) { let count = startValue; // count starts from the passed value
return function() { count++; console.log(`Current count: ${count}`); };}
const counterFrom10 = createCounter(10);counterFrom10(); // Current count: 11counterFrom10(); // Current count: 12counterFrom10(); // Current count: 13
const counterFrom5 = createCounter(5);counterFrom5(); // Current count: 6counterFrom5(); // Current count: 7- This time, we pass an initial value (
startValue) tocreateCounter(). The count variable is initialized with this value. - When you create two counters (
counterFrom10andcounterFrom5), each has its independent count variable, but both preserve their state between calls. Each closure remembers its starting value.
Multiple Functions Sharing the Same Closure
Now, let’s say you want to create a counter that can increment, decrement, or reset the count. Here’s how you can do that using closures.
function createAdvancedCounter() { let count = 0;
return { increment: function() { count++; console.log(`Count after increment: ${count}`); }, decrement: function() { count--; console.log(`Count after decrement: ${count}`); }, reset: function() { count = 0; console.log(`Count after reset: ${count}`); } };}
const advancedCounter = createAdvancedCounter();
advancedCounter.increment(); // Count after increment: 1advancedCounter.increment(); // Count after increment: 2advancedCounter.decrement(); // Count after decrement: 1advancedCounter.reset(); // Count after reset: 0- We’re returning an object that contains multiple functions, all of which share access to the same
countvariable. - Each method (
increment,decrement,reset) is a closure, and they all share the same count state. So, whether you increment, decrement, or reset, they’re all working with the same count variable that’s kept alive by the closure.
First Approach: Why Does It Reset?
In the first approach:
createCount().increment(); // Count increased to 1createCount().increment(); // Count increased to 1 againEvery time you call createCount(), you are creating a new instance of the count variable.
- The first
createCount()call creates a freshcount = 0, increments it to 1, and logs it. - The second
createCount()call does the same thing: it creates a newcount = 0and increments it again to 1.
This is why the count resets in this approach—it’s like hitting the “reset button” every time you call createCount().
Second Approach: Why Does It Continue?
Now, look at the second approach:
let counter = createCount();counter.increment(); // Count increased to 1counter.increment(); // Count increased to 2Here, you’re only calling createCount() once. This is crucial because you’re saving the result (which is the increment function) into the counter variable.
- The first time you call
counter.increment(), it uses the count that was initialized as 0 in the originalcreateCount(). It increments the count to 1. - The second time you call
counter.increment(), it doesn’t reset count. It just uses the same count value that’s now 1 and increments it to 2.
Since you’re not calling createCount() again, you’re using the same closure, and the count value persists between calls.
Closures are super useful because they let you “remember” values in your functions, even after those functions have finished running. In real-world applications, closures are the backbone of things like:
- Event listeners that need to remember some information.
- Callbacks where the function is called much later but still needs access to earlier variables.
- Private variables, where you want to keep a value hidden from the outside world.