1. How it works
I have the following code:
1 2 3 4 5 6 7 8 9 10 11 12 | 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"? |
I create a variable named fruit and assign it to a ‘raspberry’ string, then I pass fruit to a constructor and return a function called logger which will capture the result when called. There, I got the console.log output of ‘raspberry’ as expected.
I can go through this step by step by calling getLogger again to get the new getLogger :
1 2 3 | const logFruit2 = getLogger(fruit) logFruit2() // "peach" what a relief |
And the question here is why can’t I just change the value of the variable and ask the logger record the latest value? The answer is the fact that in JavaScript, when you call a function with arguments, the arguments you are passing are passed by value, not by reference. Let me briefly describe what’s going on here:
1 2 3 4 5 6 7 8 9 10 11 | 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 logging function is created. It’s a brand new function. When a completely new function is created, it looks for all the variables it has access to and “closes over” them to form what’s called “closure”. This means as long as this logger function exists, it will have access to the variables in its parent and other module level variables. So what variables does the logger have access to when it is created? Looking back at the example, it will have access to fruit , getLogger , arg and logger (itself) . Read that list again, because what’s important is why the code works its way. Did you notice something? Both fruit and arg are listed, although they have the same value. Just because two variables are assigned the same value doesn’t mean they are the same variable. Here is a simple example of that concept:
1 2 3 4 5 6 | let a = 1 let b = a console.log(a, b) // 1, 1 a = 2 console.log(a, b) // 2, 1 ‼️ |
Note that even though we make b point to the value of variable a , we can still change variable a and the value b refers to unchanged. I like to think of variables as little arrows pointing to locations in the computer’s memory.So when we say let a = 1 , we’re saying: “Hey JavaScript engine, I want you to create a location in memory with a value of 1 and then create an arrow (variable) called a pointing to that location in memory. ” Then when we say: let b = a , we’re saying “Hey JavaScript stuff, I want you to create an arrow (variable) named b points to the same place where a points to at the moment. ” In a similar way, when you call a function, the JavaScript engine creates a new variable for the function’s arguments. In our case, we called getLogger (fruit) and basically the JavaScript engine did this:
1 2 | let arg = fruit |
So when we do fruit = ‘peach’ , it has no effect on the argument since they are completely different variables. Whether you think this is a limitation or a feature, the reality is this is how it works.If you want to keep two variables updated together, there is a way to do it. Instead of changing where the arrows (variables) point to, you can change what they are pointing to. For example:
1 2 3 4 5 6 | 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, I’m not re-assigning a , but changing the value a is pointing to. And because b is pointed to the same thing, they both get the update. I applied this solution to the logger problem. I have the following code:
1 2 3 4 5 6 7 8 9 10 11 12 | 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" |
Ref stands for “reference” which means that the value that the variable points to is used only to refer to another value (in our case, the current property of an object).
2. Conclusion
I’m glad the JavaScript specification requires function arguments to be passed by value instead of reference.And the workaround isn’t too difficult when you need it (which is quite rare because the ability to change makes the program more confusing than usual). Hope that helps you guys. If there are many shortcomings, hope to receive everyone’s comments. Thank you very much!
Reference link: https://kentcdodds.com/blog/javascript-pass-by-value-function-parameters?fbclid=IwAR1CCcPBXgxEBA3dzJlIuVTaIJEBKyLohIaIoHdF6JfWdh8g0FA-x8gwKtE