DEV Community

Ming-Shiuan Tsai
Ming-Shiuan Tsai

Posted on • Updated on

JavaScript: var, let, const

In ES6, a new way to declare variable is introduced -- const and let. Before ES6, developers use var to declare different variables. However, it may cause potential issues or implicit bugs in the code. In this article, I'll introduce const, let, var and give a clear comparison.

Comparison Table

var let const
reassigned O O X
Scope Function Scope Block Scope Block Scope
Reference before declaration O X X

const

const is used when you don't want to reassign the variable. It stays constant once it's declared. As a result, const is always a default option for me if I don't need to reassign the variable. In this way, we can also avoid the case when we occasionally declare the same variable name in other files.

let

When it comes to the situation I need to reassign a variable, let is more welcome than var after ES6. The reason is that let is in block scope which means it only exists within its own scope. For Example,

let foo='outside';
if(true){
    let foo = 'inside'
    console.log(foo);            //print inside

}
console.log(foo);                //print outside

Enter fullscreen mode Exit fullscreen mode

After if condition, foo is equal to 'outside' rather than the value we have inside the if statement ('inside').

var

var is an old way to declare variable in javaScript and it's now the weakest keyword to define a variable. The variable declared by var may or may not be reassigned and because it is in function scope, the variable may or may not be used for entire function. If the variable is reassigned accidentally within a for loop (block scope), then that's when things can easily go wrong. People can overwrite the parent assignments in this case. For example,

var foo='outside';
if(true){
    var foo = 'inside'
    console.log(foo);            //print inside

}
console.log(foo);                //print inside

Enter fullscreen mode Exit fullscreen mode

To clarify, var is in function scope. So if people do reassignment in a function, the variable outside the function wouldn't be changed.

var foo='outside';
var fooFunction = function(){var foo='inside'}
fooFunction();
console.log(foo);    //print outside

Enter fullscreen mode Exit fullscreen mode

Another potential issue with var is that it can be referenced before it's assigned. For example,

var x = 'foo';
console.log(x);         //foo
console.log(y);         //undefined, no errors!!
var y = 'late foo';     //late foo 
console.log(y);

Enter fullscreen mode Exit fullscreen mode

There's no errors when using variable before declaration. Javascript engine reads the above script as

var x;             //variable declaration
var y;             //variable declaration
x = 'foo';         //variable initialization
console.log(x);    //foo
console.log(y);    //undefined, no errors!!
y ='late foo';     //variable initialization
console.log(y);    //late foo


Enter fullscreen mode Exit fullscreen mode

This is because Javascript engine only hoists declaration not initialization. Although people can avoid this issue by using 'use strict', const and let are still stronger and can reduce potential error and make the code more clear.

Top comments (8)

Collapse
 
helloanandpatel profile image
helloanandpatel

Ming-Shiuan Tsai, nice article. It looks like there is a mistake in your last javascript snippet. Shouldn't it be -
var x = 'foo';
var y;
console.log(x);
console.log(y);
y = 'late foo';
console.log(y);

Collapse
 
abdallah0123 profile image
abdallah0123 • Edited

I think your are right

Collapse
 
mingt profile image
Ming-Shiuan Tsai

Thanks for pointing out the mistake! I've updated the article!

Collapse
 
tyrellblackburn profile image
tyrellblackburn

Ming-Shiuan Tsai, I'm loving your communication style. It's very clear and easy to understand. Thanks for writing your articles.

Collapse
 
abdelazizmahdi profile image
Abdelaziz Mahdi

Thanks Ming-Shiuan Tsai, your article was really clear and easy to understand, for those like me doesn't know about use strict :

Strict Mode was a new feature in ECMAScript 5 that allows you to place a program, or a function, in a “strict” operating context. This strict context prevents certain actions from being taken.
More Info...

Collapse
 
banzaman profile image
Mark Rubanza

now I understand

Collapse
 
sanjarcode profile image
Sanjar Afaq • Edited

Ming-Shiuan Tsai, thanks a lot for the great article.
Correction: Your last snippet's 2nd comment is wrong. It should be
// late foo
instead of // undefined, no errors!!

Collapse
 
profsain profile image
Husseini Mudi

Excellent explanation. Thanks