When to use the var, let and const keywords?
So what is the deal with the var, let and const keywords?
Have you ever run into that JavaScript online tutorial and seen the old var declaration? I bet.
But the JavaScript course you recently bought didn’t even mention this keyword and always used let or const, right?
Let’s explore the differences and find out when to use each one of them.
var keyword
The ancient var keyword was the first and only way of declaring a variable in JavaScript until ES6 first came out in 2015.
For many years, this was the only option available for every program, tutorial or book about JavaScript.
That’s why whenever you get in touch with any content that came about before 2015, you’re certain to find the var keyword.
If you think about it, this wasn’t even that long ago… but for web programming standards it’s like stone age.
let and const keywords
These two beauties came along with ES6.
In just a few years, they’ve almost completely substituted var in modern JavaScript software.
let declares a mutable variable, whereas const creates a read-only reference in memory. That means you can’t change the value of a const.
So, since var also creates a mutable variale, thenlet must be just like var. Right?
Wrong!
The differences between var, let, and const keywords
What are the differences between the var, let and const keywords?
Apart from the obvious difference between const and var, there are still a few others.
Let’s see which differences exactly, and specially let’s understand why var is not the same as let.
Hoisting
The first difference that comes to mind is the fact that var is subject to something called hoisting, whereas the other variable declarations are not!
Hoisting is something that the JavaScript does before it starts to execute your code.
It assesses all var and function declarations and creates an empty reference to them before it proceeds with its errands.
Let’s see an example:
//*-- Some other code here --*//var a = 2;
In the example above, var a could be referenced before it was declared. It’s just like the following had happened:
var a;//*-- Some other code here --*//a = 2;
This is a good abstraction for what hoisting does. It’s like JavaScript hoists the variable declaration to the top of your code.
Note that even though a could be accessed before it is actually declared in your code, it would have no value and its value would only be available after the value assignment.
This does not happen with let and const.
You just can’t reference a let or const variable before it’s declaration. Otherwise you’ll get an error.
Scope
The other very important difference between var and our friends letand const is the fact that both use different scopes.
If you don’t know what scope is, check out my recent posts about the subject.
var uses the function scope, whereas let and const both use block scope. I did also explain the difference between these concepts in my articles linked above.
But as a quick recap, function scope is when only the function you’re in determines which variables are available, and block scope is when not only function, but also blocks such as if and for make a difference in which variables are available.
When should I use which keyword?
As we could see, the const keyword is the best keyword when you know that your variable’s value won’t or shouldn’t change along your code. It’s great to assure that and avoid human mistakes.
But what about let and var?
Relying on things as hoisting and using variables along many scopes is not good programming practice, because it can really make your code hard to understand and create scope issues.
There’s almost no situation where you can’t write the same functionality with better code cleanliness and better compartmentalization.
So, as a rule of thumb, you shouldn’t really use var anymore, unless it’s strictly necessary, which is really, really, rare.
What else?
I’m always writing about this and other JavaScript and Node.js stuff, so stay in tune for more useful info.
For even more content on these topics, check out my youtube channel.