Why does not this paintings?

serve as getLogger(arg) {
  serve as logger() {
    console.log(arg)
  }
  go back logger
}

let fruit = 'raspberry'
const logFruit = getLogger(fruit)

logFruit() // "raspberry"
fruit = 'peach'
logFruit() // "raspberry" Wait what!? Why is that this now not "peach"?

So, to speak thru what is taking place right here, I am making a variable known as
fruit and assigning it to a string 'raspberry', then I cross fruit to a
serve as which creates and returns a serve as known as logger which will have to log
the fruit when known as. After I name that serve as, I am getting a console.log output
of 'raspberry' as anticipated.

However then I reassign fruit to 'peach' and speak to the logger once more. However
as an alternative of having a console.log of the brand new worth of fruit, I am getting the previous
worth of fruit!

I will side-step this through calling getLogger once more to get a brand new logger:

const logFruit2 = getLogger(fruit)
logFruit2() // "peach" what a aid...

However why can not I simply trade the price of the variable and get the logger to
log the most recent worth?

The solution is the truth that in JavaScript, while you name a serve as with
arguments, the arguments you might be passing are handed through worth, now not through reference.
Let me in short describe what is going on right here:

serve as getLogger(arg) {
  serve as logger() {
    console.log(arg)
  }
  go back logger
}

// side-note, this might be written like this too
// and it would not make any distinction in anyway:
// const getLogger = arg => () => console.log(arg)
// I simply made up our minds to move extra verbose to stay it easy

When getLogger is named, the logger serve as is created. It is a brand spanking new
serve as. When a brand spanking new serve as is created, it seems round for all of the
variables it has get admission to to and “closes over” them to shape what is known as a
“closure”. Which means that as long as this logger serve as exists, it’s going to
have get admission to to the variables in its mother or father’s serve as and different module-level
variables.

So what variables does logger have get admission to to when it is created? Having a look on the
instance once more, it will have get admission to to fruit, getLogger, arg, and logger
(itself). Learn that record once more, as a result of it is important to why the code works the
means it does. Did you understand one thing? Each fruit and arg are indexed, even
although they are the very same worth!

Simply because two variables are assigned the similar worth doesn’t suggest they’re the
similar variable. Here is a simplified instance of that idea:

let a = 1
let b = a

console.log(a, b) // 1, 1

a = 2
console.log(a, b) // 2, 1 ‼️

Understand that despite the fact that we make b level to the price of variable a, we have been
in a position to modify the variable a and the price b pointed to is unchanged. This
is as a result of we did not level b to a in line with se. We pointed b to the price a
used to be pointing to on the time!

I really like to think about variables as little arrows that time to puts within the
laptop’s reminiscence. So after we say let a = 1, we are pronouncing: “Hi there JavaScript
engine, I need you to create a spot in reminiscence with the price of 1 after which
create an arrow (variable) known as a that issues to that position in reminiscence.”

Then after we say: let b = a, we are pronouncing “Hi there JavaScript engine, I need you
to create an arrow (variable) known as b that issues to the similar position that a
issues to these days.”

In the similar means, while you name a serve as, the JavaScript engine creates a brand new
variable for the serve as arguments. In our case, we known as getLogger(fruit)
and the JavaScript engine mainly did this:

let arg = fruit

So then, after we later do fruit = 'peach', it has no affect on arg as a result of
they are utterly other variables.

Whether or not you call to mind this as a limitation or a function, the truth is that that is
how it works. If you wish to stay two variables up-to-date with each and every different,
there’s a means to do this! Smartly, sorta. The speculation is that this: as an alternative of adjusting
the place the arrows (variables) level, you’ll trade what they are pointing to! For
instance:

let a = {present: 1}
let b = a

console.log(a.present, b.present) // 1, 1

a.present = 2
console.log(a.present, b.present) // 2, 2 🎉

On this case, we aren’t reassigning a, however fairly converting the price that a is
pointing to. And since b occurs to be pointed on the similar factor, they each
get the replace.

So, let’s practice this technique to our logger drawback:

serve as getLatestLogger(argRef) {
  serve as logger() {
    console.log(argRef.present)
  }
  go back logger
}

const fruitRef = {present: 'raspberry'}

const latestLogger = getLatestLogger(fruitRef)

latestLogger() // "raspberry"
fruitRef.present = 'peach'
latestLogger() // "peach" 🎉

The Ref suffix is brief for “reference” which is to mention that the price the
variable issues to is solely used to reference every other worth (which in our case
is the present assets of an object).

There are of course trade-offs with this, however I am happy that the JavaScript
specification requires serve as arguments to be handed through worth fairly than
reference. And the workaround is not an excessive amount of bother in case you have the will
(which is lovely uncommon as a result of mutability makes techniques more difficult to grasp
generally). Hope that is helping! Excellent good fortune!