JavaScript ES6 var-let-const

Srdjan Coric
Nov 23, 2017 · 4 min read

ES6 specification introduced two new ways of declaring variables in JavaScript withlet and const keyword. In this this blog post I will try to explain to you what what kind of variables these keywords create and give you some advice on when to use them.

Let’s start with let keyword. This keyword enables us to declare block scoped local variables. And to give you an example :

Inside of the while loop on line 4 we are declaring new variable using let keyword and this variable has block inside of the while loop for its scope. For this reason line 5 logs number 8 to the console and line 9 throws ReferenceError since our variable b is no longer available in this “higher” scope.

If you declare variable with let keyword in a global scope it will be available in all lower scopes.

It appears that we no longer need to use var keyword to declare variables and although it might seem true at first glance I would argue below that var variables still have its usage.

Let’s see first when it is appropriate to use let keyword and look at the code below.

This code could have been written with var i been declared at the top of the function foo body which is aligned with a practice to always declare variables at the top of their scope.

Some developers though like to declare variables as close as possible to their initial usage and also by declaring variable inside of the for loop declaration they want to stylistically signal to the reader of the code that variable i, in this case, belongs to the for loop, so that it shouldn’t be used before or after it even though it is available due to hoisting rules.

In this case, block scoping a variable by using a keyword let makes complete sense as this enforces what is already being stylistically signaled.

This doesn’t mean however that we should now completely replace let with var. Our ultimate goal should be code readability. var keyword actually tells us that we are creating variable that we want to use across whole function. The let keyword doesn’t tell us that. Its position does, but the variable itself doesn’t, so, using var in this case helps with code readability.

Now let’s look at const keyword. It enables us to create block scoped variables just like let word does or as it is defined on MDN : “ This declaration creates a constant whose scope can be either global or local to the block in which it is declared”.

This expression “creates a constant” could create some problems with code readability since what is a constant? Some developers believe that constants are variables that hold values that can’t be changed. I will even pull a quote from Wikipedia about constant values “ In computer programming, a constant is a value that cannot be altered by the program during normal execution, i.e., the value is constant.”.

So, we know that const is creating a constant so, what do you think the code below will log:

Have you tried to answer it ? If your answer was [1, 2, 3] you were wrong. This code actually logs [’a’, 2, 3] Wait what? How can this be possible, isn’t it a case that value inside of the constant can’t be altered? Well no, constant is a variable that can’t be reassigned. It has nothing to do with value. Or as we can see in example below :

So the variable can’t be reassigned, but the value itself that the variable is referencing can be changed if it is mutable value( like an array).

Bottom line is that with const we are essentially communicating that variable will never be reassigned inside of the scope where it was declared.

When to use it? Wherever you were already using uppercase variable names i.e. var PI = 3.14; start using const.In makes sense since these variables are not intended to be reassigned later. As Kyle Simpson said in his book You don’t know JS : “ Essentially, const declarations enforce what we've stylistically signaled with our code for years, where we declared a variable name of all uppercase letters and assigned it some literal value that we took care never to change.”

Using them frequently though can affect your code readability since there are developers who will believe that constants mean that values are immutable, which is not the case as shown above and can lead to some confusion.

Hopefully this post gave you a bit of insight on when to create variables using let and const keywords.

In short, you should follow JavaScript style guide that your company suggests since that ensures that whole team is on the same page. One of the more popular style guides is Airbnb JavaScript Style Guide. In it, it is stated that you should primarily use const to create variables, and when you intend to reassign them somewhere in the code then use let and avoid using var keyword to create variables completely.

Using const primarily for variable declarations could create code readability problems for the reason I pointed out above so it would make sense, to use var keywords primarily, but, when you want to create a variable which scope is just a block use let and when you want to create variable that won’t be reassigned anywhere else in the code use const. *Note* : this advice is completely subjective, influenced by teachings of Kyle Simpson author of You don’t know JS.

Launch School

Publications of the Launch School Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store