ES6 #1. Closer Look at LET and CONST keywords


The sixth edition of ECMAScript (also known as ECMAScript 2015 or simply ES6) was officially  published in June 2015. It is the most significant update of the language for the last 16 years. It adds new significant syntax update, that makes JavaScript code look cleaner and more object oriented than ever before.  At this moment browser support for ES6 is still incomplete. However, ES6 code can be compiled into ES5 code, that supported by majority of browsers.

In this series of posts we will take a closer look at new syntax and features that ES6 brings to JavaScript. And we start with new let ans const keywords.

1. let vs var

As you know ES5 has only two scopes: local scope and global scope. If you declare a variable inside function, it will have local scope: it can be accessed only within the function. Variable declared outside of a function have global scope. It can be accessed from any place in the application.

ES6 ads one more scope: block scope. A variable declared inside some block of code enclosed by curly braces has block scope. It’s only visible within that block of code and cannot be accessed from outside of that block.

If statement, loops, functions e.t.c, all these are considered as blocks of code. ES6 uses let keyword to define a variable with block scope. 

Let’s look at the following example.

using var:

The variable keyWord is declared inside of the if block using keyword var. It can be accessed from outside of the block and we can print it on the console.

using let:

The keyWord variable is declared inside of the if block using keyword let. We can not access the variable from outside of the block. If we try to print it from outside of the block it throws an exception.

This is how block scoping works in ES6.

Unlike var, let does not allow you to access variable before it’s declared . Let’s take a look at the following peace of code:

If you try to access a variable (print this variable in the console in this case ) before it’s defined with let key word, it will throw an error. Let’s take a look at how it works with var keyword.

It does not throws an exception and prints undefined in the console. This works because JavaScript engine puts declaration of all variables with var keyword in the beginning of the code. So even you declare a variable after using it, the JS engine will fix it for you and behind the scene it would look like this:

Let’s look at one more example.

See the Pen mROKxm by Pavel Terenin (@PavelT) on CodePen.

In this example we have 5 buttons in HTML file. In JS file we iterate through each of the buttons using for loop. Inside of the loop we give a number to each button and when we click one of them we would like to see a message with the number of the button. For example when we click button #3 we would like to see “Button #3” message.  The example is interactive, please try to click buttons.

As you see it does not work as we expected. It always shows message “Button #5“, no meter what button we click. This happens because we use var keyword in this line:

It means variable is global and it changes it’s value as we go through the loop. In the end it will have value, that was given to it in the last iteration.

Let’s change  var keyword to let.

This way we will limit scope of i variable to block of code. In this case it’s a block of the for loop. The variable is locked to each iteration of the loop and we will have right result:

See the Pen jyVvOq by Pavel Terenin (@PavelT) on CodePen.


2. Using const

Besides let ES6 introduced one more new keyword – const. const stands for constant. Constant – is a variable that can’t change it’s value  after it’s declaration. A variable declared with const has a block scope and works much like variables declared with  let. But unlike let the value of a constant can not be changed .

Let’s take a look to the following example.

Unlike let and var you cannot declare a constant without a value:

const also works with objects and arrays.

However objects are not fully protected by const. We still can change properties of the object .

So as we see const  does not make objects immutable. The same happens with arrays. You can not reassign it, but you can add, remove, reorder and modify elements:

If you do need to make an object immutable, you can use Object.freeze method. It’s not ES6 method, you can take a look at how it works on MDN. It does not allow any changes.

This way we can make objects and arrays fully immutable.


You are probably wondering what keyword you should use in your application. I have a suggestion: use const as much as possible. It makes you code more robust. If you expect that your variable is going to change during program execution – use let. So what’s about var? The reality is that when you write ES6 code and you want your code to be robust and easy to debug  you don’t really need var. R.I.P. var, you will be missed.