What is hoisting? Hoisting was taking a variable declaration to the top of the scope so that it would be defined when you wanted to use it. You had to be very aware of where you variables were and when they were used. What let and const bring is a better scoping of variables.
An example of what hoisting does and what we used to have to do to manage it in our code:
After a while I got used to doing it this way, so much so that when I switched to const and let it felt very odd to declare variables where I wanted to use them.
The first is a simple scope example:
Here var is defined inside of the if statement but is accessible outside, as we can tell with the console.log statement, it returns “var : billy”. But in the let example we actually get an error because billy isn’t defined. One thing that is cool about that is that we can define the variables where we need them now instead of having to define everything at the top for sanity.
In a forLoop:
Here the var is hoisted to outside the for loop. The console.log statement below will be 2 because it runs the i++ at the end of the loop and then continues on because the i<2 is false. This gets to be a real problem when you used to have multiple for loops. Some would just reset the i after the loop, others would use, i then ii then iii depending on the number of loops to avoid problems.
Well, let solves that, because let is in the scope of the loop. So in the second bit of code i throws an error. Yay, no more of those problems, but it gets better, there is one more loop example that is kinda crazy.
In a for loop, with broken flow:
Inside the loop I put a timeout. This is to rip us out of the context of the loop. It might make more sense as I talk about what happens.
In the first bit of code we are using var and a timeout. The first time I run the loop i is 0, then it moves on to the next cycle of the loop, 1, then 2 and so on. Nothing earth shattering there. Except the loop cycle is so fast that when the setTimeout happens the loop is done. Because of hoisting the variable is outside the scope of the loop and I will get ten log statements that read ‘in var loop with timeout: 10’. This behavior I just accepted in js because that is how it has always been.
Ready to blow your mind. (Well, if you looked at the codepen at the beginning you may have already seen it, but here is the explanation.) Let is scoped, so in the second loop the result is:
in var loop with timeout: 0
in var loop with timeout: 1
in var loop with timeout: 2
in var loop with timeout: 3
in var loop with timeout: 4
in var loop with timeout: 5
in var loop with timeout: 6
in var loop with timeout: 7
in var loop with timeout: 8
in var loop with timeout: 9Crazy huh. This is totally different, even when the flow of the loop is broken, let maintains scope! Whoa. Awesome.
And to finish out the article. Const
So what is cool about const is that it is non reassignable, not immutable and I’ll explain why a little later, but first what does const do?
JS will throw an error when I try to reassign billy because it is a const. Most of the time I use const now because most of the time I never want to reassign a variable. This does come into play if you like to set your variables for early garbage collection as a const won’t let you reassign your variable, but this is less necessary because of the limited scope of let and const. When the scope is finished then the variable are garbage collected. With hoisting the scope was much greater.
Here is the reason that const isn’t immutable:
When dealing with an object const refers to the object reference, but not to the contents of that object. So in the above example I can change the values, even add new values, but when I try to assign it to a new object, it will throw an error.
Be sure to look at the whole series: ES6 Series
or the next section: ES6 Series: Old but New
