ES6: var vs. let vs. const - Every JavaScript Programmer Should Know

There are few concepts in JavaScript that make programmers, especially newbies, scratch their head to the point that they start considering JavaScript really complex, which it is not.

In this article, I shall talk about the three confusing but basic concepts, var, let and const, that every JavaScript programmer should have in their brain's repository.

With the evolution of the JavaScript, the standardize version of it commonly referred as ESx, where x stands for numbers like 5,6, etc., gets some new features.

let and const can be considered as those new features. Therefore, it is necessary to understand the basic theory behind let and const, and also how they differ from each other and from the other good-old identifier of JavaScript var.

Let us first understand what an identifier is!

Identifier

In simple terms, an identifier is something that is used to represent and hold some data temporarily.

In ES6, there are three identifiers that can hold the data, which are: var, let and const. Time to explain them one by one.

Now that we know the identifiers, it is time to take a little digression and know what ES6 is.

What is ES6?

Before I dive deep into these concepts, let me introduce to you what ES6 actually is.

*ECMAScript 6, also called ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009.*

Now that you know all the historical and basic information of the subject-matter, it is time to dive deep into var, let and const discussion.

var vs. let vs. const

If you ask any JavaScript programmer to tell you one keyword that is used a lot in the JavaScript program, he or she would most probably say: var .

var used to be the only placeholder in JavaScript for years. But now we have two other very charming variables: let and const.

In order to understand the difference amongst var, let and const, I think the best strategy would be to give you an example:

if(true) {

    var a  = 10;
    console.log("1: Inside the scope: The (var) value of a is:" +a+".");
}

console.log('2: Outside the scope: The (var) value of a is:' +a+'.');

if(true) {

    let b  = 10;
    console.log("3: Inside the scope: The (let) value of b is:" +b+".");
}

console.log('4: Outside the scope: The (let) value of b is:' +b+'.');

if(true) {

    const c  = 10;
    console.log("5: Inside the scope: The (const) value of c is:" +c+".");
}

console.log('6: Outside the scope: The (const) value of c is:' +c+'.');

What do you think would be the output of the above code? All the console logs are numbered from 1 to 6. Write them down somewhere! Done that? Okay, let me reveal the answers.

Output of the above code:

1: Inside the scope: The (var) value of a is: 10. 2: Outside the scope: The (var) value of a is: 10. 3: Inside the scope: The (let) value of b is: 10. 4: ReferenceError: b is not defined. 5: Inside the scope: The (const) value of c is: 10. 6: ReferenceError: c is not defined.

The above output shows that var identifier/variable does not care about the score, whereas let and const are scope-dependent.

Now that leaves us to see what is the difference between let and const, and in the above example, both of them showed the same behaviour. For this let us again take an example:

let b  = 10;
console.log("1: The (let) value of b is:" +b+".");
b = 30;
console.log("2: The (let) value of b is:" +b+".");


const c  = 10;
console.log("3: The (const) value of c is:" +c+".");
c  = 200;
console.log("4: The (const) value of c is:" +c+".");

Output of the above code:

1: The (let) value of b is: 10. 2: The (let) value of b is: 30. 3: The (const) value of c is: 10. 4: TypeError: Assignment to constant variable.

As you can see the output of the above code, the identifier let can be reassigned, whereas the const does not allow the reassignment.

Summary

In this article, we have seen the difference amongst var, let and const with the help of an example. var does not care about the scope; let does not care about the reassignment; const seems to be very picky. Once const picks a value, its life would complete; and it will not take any other value. I hope you understand the differences amongst them. That's it for this article!

AUTHOR

Possible typo: ".. var identifier/variable does not care about the score" should be scope not score.

Very nice article for new learners. I was looking for this difference. Thanks Adam.

READ NEXT

Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?