I am trying to understand the core of js concepts, and I tried to write some closure.
function counter(){
let counter = 0;
return{
increment: () => counter++,
getCounter: counter
}
}
const addCounter = counter();
addCounter.increment();
addCounter.increment();
addCounter.increment();
addCounter.increment();
addCounter.increment();
console.log(addCounter.getCounter)
the output here is 0
if I will change getCounter: counter to getCounter:()=>counter and will call again with addCounter.getCounter() the answer is correct and will be 5. can someone explain me why?
When the object is returned, the content here is evaluated as an expression:
{
increment: () => counter++,
getCounter: counter
}
At that point in time, the counter is 0, so it's equivalent to
{
increment: () => counter++,
getCounter: 0
}
The counter, although updated by the increment function, is not referenced again after the (static) object is returned.
You need to make getCounter a function or getter, so that it returns the current value inside the closure.
function counter(){
let counter = 0;
return{
increment: () => counter++,
get getCounter() { return counter; }
}
}
const addCounter = counter();
addCounter.increment();
addCounter.increment();
addCounter.increment();
addCounter.increment();
addCounter.increment();
console.log(addCounter.getCounter)