What are the differences between var, let and const?

What are the differences between var, let and const?

Let's say you are learning Javascript now and suddenly you see three different possibilities to use as variables. It can be confused at first, but in reality, it is pretty simple and once you get to know the difference between those variables, you will know when and where to use them.

So, let's answer the question: What are the differences between var, let and const?

First things first: what are ES5 and ES6? 🧐

Those are Javascript versions! ES6 means ECMAScript 2015 and ECMAScript is a standard of Javascript. When ES6 came, it brought with it a lot of great new functionalities for Javascript like arrow functions, new variables, destructuring, etc. It is a great enhancement and if you are learning Javascript now, I strongly encourage you to learn ES6.

In Javascript ES5, var was king. It was used for everything. But with the new Javascript syntax ES6, there were two new variables introduced: const and let.

But what is the difference between those 3 variables and when should you use them? πŸ€”

It comes basically to 3 things: scope, declarations/updates and hoisting.

β˜‘οΈ VAR

πŸ‘‰ Is globally scoped or function scoped. That means that if you declare a variable outside the block, var will be considered a global variable and will work everywhere. If you declare var inside a block ( a block is everything between curly braces), it will work only inside that block. If you declare the variable inside the function, you still can use it inside the block. πŸ‘‰ Can be re-declared and updated within its scope. πŸ‘‰ Are hoisted to the top of its scope and initialized with a value of undefined.

β˜‘οΈ LET

πŸ‘‰ Is block scoped. So if you try to update that variable somewhere out the block, globally or in the function, for example, it will return undefined. πŸ‘‰ Let can be updated, but not re-declared! If you try to re-declare it, Javascript will throw an error. πŸ‘‰ Are hoisted om the top as well but is not initialized. If you try to use it before the declaration, you will get a Reference Error!

The best about it, is that since let only work inside its scope, you don’t need to worry if it has been used before and if you will accidentally update it somewhere else.

A great example of let, is when you need a variable that holds an empty array or a variable initialized on zero.

β˜‘οΈ CONST

πŸ‘‰is block scoped. πŸ‘‰can’t be updated or re-declared. πŸ‘‰is hoisted on the top as well but not declared. It must be initialized during declaration. Const is a great choice when you won't need to re-declare or update it becoming the best choice to substitute var.

So, which variable to choose? πŸ€“

If you are coding with the ES6 syntax, try to use the maximum possible only const and let. It is considered best practice since it won't cause the problems that var would.

And then, decide if it needs to be updated or not. Will you need to update it? Then you should use let. If you don't need to update it, go for const. Both are top hoisted and work only inside a scope.

If you have any questions, feel free to drop them on this post on my  Instagram or  Twitter.

I see you in the next post! πŸ––

Author: Raj Shekhar

Back to Blog
Navigated to Raj Shekhar