Why doesn't this work?
function getLogger(arg) {
function logger() {
console.log(arg)
}
return logger
}
let fruit = 'raspberry'
const logFruit = getLogger(fruit)
logFruit() // "raspberry"
fruit = 'peach'
logFruit() // "raspberry" Wait what!? Why is this not "peach"?
So, to talk through what's happening here, I'm creating a variable called
fruit
and assigning it to a string 'raspberry'
, then I pass fruit
to a
function which creates and returns a function called logger
which should log
the fruit
when called. When I call that function, I get a console.log
output
of 'raspberry'
as expected.
But then I reassign fruit
to 'peach'
and call the logger
again. But
instead of getting a console.log
of the new value of fruit
, I get the old
value of fruit
!
I can side-step this by calling getLogger
again to get a new logger:
const logFruit2 = getLogger(fruit)
logFruit2() // "peach" what a relief...
But why can't I just change the value of the variable and get the logger
to
log the latest value?
The answer is the fact that in JavaScript, when you call a function with arguments, the arguments you're passing are passed by value, not by reference. Let me briefly describe what's going on here:
function getLogger(arg) {
function logger() {
console.log(arg)
}
return logger
}
// side-note, this could be written like this too
// and it wouldn't make any difference whatsoever:
// const getLogger = arg => () => console.log(arg)
// I just decided to go more verbose to keep it simple
When getLogger
is called, the logger
function is created. It's a brand new
function. When a brand new function is created, it looks around for all the
variables it has access to and "closes over" them to form what's called a
"closure". This means that so long as this logger
function exists, it will
have access to the variables in its parent's function and other module-level
variables.
So what variables does logger
have access to when it's created? Looking at the
example again, it'll have access to fruit
, getLogger
, arg
, and logger
(itself). Read that list again, because it's critical to why the code works the
way it does. Did you notice something? Both fruit
and arg
are listed, even
though they're the exact same value!
Just because two variables are assigned the same value doesn't mean they are the same variable. Here's a simplified example of that concept:
let a = 1
let b = a
console.log(a, b) // 1, 1
a = 2
console.log(a, b) // 2, 1 โผ๏ธ
Notice that even though we make b
point to the value of variable a
, we were
able to change the variable a
and the value b
pointed to is unchanged. This
is because we didn't point b
to a
per se. We pointed b
to the value a
was pointing to at the time!
I like to think of variables as little arrows that point to places in the
computer's memory. So when we say let a = 1
, we're saying: "Hey JavaScript
engine, I want you to create a place in memory with the value of 1
and then
create an arrow (variable) called a
that points to that place in memory."
Then when we say: let b = a
, we're saying "Hey JavaScript engine, I want you
to create an arrow (variable) called b
that points to the same place that a
points to at the moment."
In the same way, when you call a function, the JavaScript engine creates a new
variable for the function arguments. In our case, we called getLogger(fruit)
and the JavaScript engine basically did this:
let arg = fruit
So then, when we later do fruit = 'peach'
, it has no impact on arg
because
they're completely different variables.
Whether you think of this as a limitation or a feature, the fact is that this is the way it works. If you want to keep two variables up-to-date with each other, there is a way to do that! Well, sorta. The idea is this: instead of changing where the arrows (variables) point, you can change what they're pointing to! For example:
let a = { current: 1 }
let b = a
console.log(a.current, b.current) // 1, 1
a.current = 2
console.log(a.current, b.current) // 2, 2 ๐
In this case, we're not reassigning a, but rather changing the value that a
is
pointing to. And because b
happens to be pointed at the same thing, they both
get the update.
So, let's apply this solution to our logger
problem:
function getLatestLogger(argRef) {
function logger() {
console.log(argRef.current)
}
return logger
}
const fruitRef = { current: 'raspberry' }
const latestLogger = getLatestLogger(fruitRef)
latestLogger() // "raspberry"
fruitRef.current = 'peach'
latestLogger() // "peach" ๐
The Ref
suffix is short for "reference" which is to say that the value the
variable points to is simply used to reference another value (which in our case
is the current
property of an object).
Conclusion
There are naturally trade-offs with this, but I'm glad that the JavaScript specification calls for function arguments to be passed by value rather than reference. And the workaround isn't too much trouble when you have the need (which is pretty rare because mutability makes programs harder to understand normally). Hope that helps! Good luck!