And last, we need to know can this variable be hoisted? Hoisting is something that happens to our code where variables at the bottom of the file are actually available to us at the top.
So, between var, const, and let: some of them are hoisted and some of them are not.
You can see on above chart that is marked some of the properties of var, const, and let, but just looking at this isn’t actually that helpful.
So, in this post I try show how var, const, and let each work, using the create-react-app to run my examples.
Hoisting these type of variables
To understand better how each of these variables works, let’s try do some hoisting with var, const and let.
Trying hoisting using var
First, let’s see how var works.
On the below example I’m saying
iceCream = "watermelon" and then I’m console logging
the word hoisted and the value of iceCream:
iceCream = "watermelon"; console.log("hoisted?", iceCream); var iceCream = "chocolate"; console.log("declared", iceCream);
and then below it, I’m declaring the
var iceCream, and calling it
"chocolate", and then I’m console logging declared
and the iceCream value.
So, lets see how this behaves.
When I go to the my browser, I can see that in the terminal it says
hoisted?, watermelon and
So, when I compare this to the example, I can see that we actually were able to access
iceCream before it was declared and
we can see that it took this variable of
"watermelon"and console logged it, but then also let us reassign
the variable to
"chocolate"and then console logged that.
As we can see in our console, my variable
iceCream has two values, first
watermelon and the
This is an example of both hoisting and reassignment, so we can see that our variable got hoisted and then also got reassigned.
But, we can also see on the terminal (and also on the browser console), the create-react-app tool linter has actually raised some warnings:
'iceCream' was used before it was defined. So, even though we can do that, even though var lets us do that,
create-react-app’s default linter has said:
“That’s probably not a good idea, it’s kind of confusing.”
So, we can really use this in our application, but you aren’t doing the recommended and don’t following a good practice.
To read more about the
no-use-before-define rule, please use your official
Trying hoisting using const
So, lets see what happens when we try and do the same thing that we did with var, with const.
gelato = "mango"; console.log("hoisted?", gelato); const gelato = "lemon"; console.log("declared", gelato);
If I try to save my file, right away the React will give me an error:
This is because
const cannot be reassigned before it’s declared, it is not hoisted.
So, we can see rather than just getting a warning, like, that’s not a good practice, we’re actually getting an error, you cannot do that.
Trying hoisting using let
Lets try it now with let. Here, we’ve got a variable called froYo and we’re assigning it before declaring it.
froYo = "brownie"; console.log("hoisted?", froYo); let froYo = "cherry"; console.log("declared", froYo);
This example is saying
froYo = "brownie" and then we’re also declaring it below and we’re going to say, lets make it cherry.
So after I saved this file I’ll go back to my browser.
Interestingly, we see that we’re not getting an error here but the same warning for the hoisting with var example:
So it’s allowed us to reassign a let before it was declared and it’s also hoisted the variable, just like with var.
Now, remember that on the chart on the begin of the artivle said that const and let, that neither of them were hoisted. Well, it seems like let got hoisted here.
That’s because I’m testing inside a function that’s being run inside a module,
create-react-app tool does some sort of fancy things with the way our files are formatted,
so it’s actually going to let us hoist the
Now when we’ve gotten the chance to look at the way const, let and var interact with each other when we try and reassign them, or hoist them.
As you can see, there’s a lot of intricate details between when to use var, const and let, so I’m going to go over a few more of them in the next articles on this blog.
But I’d really like to encourage you to take some time on your own to try uncommenting out different parts of the code use on this example, that is available on your GitHub link to see how var, const and let interact with each other.
So, when I use var, const and let?
One thing I want to draw your attention to though, if this starts to get a little complicated is that you can think about it this way; in general, const means this is a variable that will not change.
You should use
const when you want to make a variable that you don’t intend to change.
let, you should use when you have a variable that you do intend to change.
var is notorious for being both globally and locally scoped, which means that once you declare a var variable,
it’s going to be available throughout your entire file and this can sometimes create some strange interactions,
let are just scoped in the block in which they’re declared.
This all gets a little bit difficult, but in general, I think it’s good practice to use const and let, unless you have a real reason to use var and you understand the ramifications of it’s scope.
The examples of this article and project that I used to run them and other examples are available on my GitHub repository.