I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

ES6 let VS const variables

In the last post we learned all about how scoping works with JavaScript let, const and var variables.

We now know that var is function scope, and now we know that let and const are block scope, which means any time you’ve got a set of curly brackets you have block scope.

Now, we need to know you can only declare a variable inside of its scope once.

const key = 'abc123';
let points = 50;
let winner = false;

If I try to update points by re-declaring the let variable:

let points = 60;

The browser says points has already been declared.

However, with var, it will just go ahead and declare the variable, which can cause a lot of bugs, because you might accidentally use the same variable twice.

You can update a let variable, and we’ll take a look more at let and const but you cannot redeclare it twice in the same scope.

Now, what if I had this?

const key = 'abc123';
let points = 50;
let winner = false;

if(points > 40) {
   let winner = true
}

If we type in the console, winner will come back as false. We can add a Console.log line to prove that it runs, but why is winner still false, if we set winner to be true?

The important thing here is that these two winner variables are actually two separate variables. They have the same name, but they are both scoped differently:

  • let winner = false outside of the if loop is scoped to the window.
  • let winner = true inside the if loop is scoped to the block.

If I change our let winner to be var winner, they’ll come back as true, because it’s not inside of a function, it’s not scoped to it, whereas a let variable is.

The other thing we need to know about it is that the difference between let and const is that const variables cannot be updated.

let variables are made to be updated. I may say:

const key = 'abc123';
let points = 50;
let winner = false;

points = 60;

..and that will work just fine.

However, I’ve got that key variable, maybe something that you do not want to ever change, we can use a const, which stands for constant.

const key = 'abc123';

If I try to update it like so:

const key = 'abc123';
let points = 50;
let winner = false;

key = abc1234;

That won’t work because you cannot update a const variable, whereas you can update a let variable.

We’re going to go more into examples of these and you’re going to understand which one to use as we go through, but that’s really all we need to know about it for now.

One other quick thing is that sometimes people think that const means it’s immutable, which means that if I have an object…

const person = {
 name: 'Wes',
 age: 28
}

…and if I try to update something in the const object by typing person = { name: 'Wesley' } it won’t allow me to do that.

However, the properties of a const variable can change. That’s because the entire object is not immutable. It just can’t be reassigned entirely.

The way I like to think about it with an object is that the person is me. I’m not going to ever change, my entire life, but attributes about me are going to change.

Maybe my age, my hair color, where I live — things about me — are going to change. That’s fine, as long as the object that is assigned to Wes is always the exact same object, I can go ahead and set a new age:

const person = {
  name: 'Wes',
  age: 28
}

person.age = 29

That will work just fine, but I cannot ever wipe out the entire variable.

If you do need to freeze everything, we have something called Object.freeze. It’s actually not part of ES6, but you can take a look at it on MDN.

So we can use it on our object:

const wes = Object.freeze(person);

If I try to update Wes.age = 30, it will still say 28 👌

This entry was posted in ES6, JavaScript. Bookmark the permalink.

32 Responses to ES6 let VS const variables

  1. Pingback: Is var Dead? What should I use? | Wes Bos

  2. Kiarash says:

    Thanks! it was very clearly and i understood everything:)

  3. Govind says:

    Great post, Wes! You’ve written it very clearly, still took me multiple reads and two days to find the golden nuggets in this write up. Suggest all readers to also read Bos’ other article, “Is var Dead? What should I use?”‘ to get a holistic answer

  4. OMG! multiple instances of the same variable depending on the scope (let), const objects whose properties can be changed… Sincerely, apart from adding confusion and potential bugs to the code, I’m totally unable to understand the goodness of these features. But anyway, post was brilliant, thanks a lot !

  5. Hey there, just a quick fix in sixth code example: shouldn’t it be ‘abc1234’ instead of abc1234?

    Regards,
    Milos

  6. Pawan says:

    Very well written. Clearly explains the concept. Thanks!

  7. Cal Pang says:

    Amazing post, thank you for using examples to describe the concepts

  8. venkatesh says:

    Nice Post

  9. Mark says:

    I believe `key = abc1234;` should be changed to `key = ‘abc1234’;`.
    Great article! This and “Is var Dead? What should I use?” helped me to decide how and when I’m going to use the var, let, and const. Default const all the way!

  10. David Tran says:

    Fantastic read! The previous post on let and const scoping was really helpful too. I was searching around for best practices regarding using var, let, and const.

    I have also read your “Is var Dead…” post and it seems that you avoid using var. Are there any instances where you would still use var since the publication of these posts?

    For instance, an iterator variable in a for loop whose value is used outside. Would it be better to try to restructure the code to avoid this situation?

  11. Tier0011 says:

    This was a great post. I learned a lot more about ‘const’s and the way they operate when they are assigned an object type. I wasn’t aware of Object.freeze() until this post; I’ll have to checkout this class on MDN. Once again, great post; it was very clear and concise.

  12. Patrick says:

    Wish I’d come upon this page when I was learning es6.
    Lucidly explained! Thanks!

  13. Vish says:

    Very nicely explained the difference between let, var and const.

  14. KmasterYC says:

    Thank for great post. So easy to understand 😀

  15. safoura says:

    Thanks for the post, It is useful and clear!

  16. Daniel says:

    I finally got the difference. Thank you so much!

    Why not use Disqus?

  17. vipin says:

    Thanks..!

  18. vipin says:

    nice post…

  19. Raymond Lopez says:

    Your article is simple and easy to understand, thank you Wes!

  20. Makala says:

    Great article! very precise and direct…it took me zero effort to comprehend the content, thank you very much!

  21. Rengarajan says:

    Wow what an article this is!!!
    Thanks a lot…

  22. sandy says:

    I liked the way you describe ES6, let and const. Thanks for your post.

  23. Slobodan says:

    Good post, it clarifies a lot.

    Thanks

  24. Fatima says:

    Wow, thank you! Made it super clear. I knew it’s considered “bad practice” to use var these days, but wasn’t entirely sure when to use const and when to use let. Now I do! Thank you 🙂 new to JavaScript and thrown straight into the mean stack…

  25. Masiur Rahman Siddiki says:

    I tried to follow various articles but what you’ve written is really cool. Gratitude, Man.

  26. Lukas says:

    Grate post, thanks!

  27. Anish says:

    Thank-you for the analogy, “The way I like to think about it with an object is that the person is me. I’m not going to ever change, my entire life, but attributes about me are going to change.”

    Very well explained. Thanks!

  28. Karthik says:

    That was small, clear and to the point really apprciate the effort you’ve put in spreading out the knowledge !

  29. James Dalton says:

    Really clear, thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *