ES6 in Action: let and const

In this tutorial, I’ll introduce let and const, two new keywords added to JavaScript with the arrival of ES6. They enhance JavaScript by providing a way to define block-scope variables and constants.

This article is one of many covering new features of JavaScript introduced with ES6, including Map and WeakMap, Set and WeakSet, new methods available for String, Number, and Array, and the new syntax available for functions.

let

Up to ES5, JavaScript had only two types of scope, function scope and global scope. This caused a lot of frustration and unexpected behaviors for developers coming from other languages such as C, C++ or Java. JavaScript lacked block scope, meaning that a variable is only accessible within the block in which it’s defined. A block is everything inside an opening and closing curly bracket. Let’s take a look at the following example:

function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // prints 1
    console.log(bar); // prints 2
  }
  console.log(par); // prints 1
  console.log(bar); // prints 2
}
foo();

After running this code, you’ll see the following output in the console:

1
2
1
2

What most developers coming from the languages mentioned above would expect, is that outside the if block you can’t access the bar variable. For example, running the equivalent code in C results in the error 'bar' undeclared at line ... which refers to the use of bar outside the if.

This situation changed in ES6 with the availability of block scope. The ECMA organization members knew that they could not change the behavior of the keyword var, as that would break backward compatibility. So they decided to introduce a new keyword called let. The latter can be used to define variables limiting their scope to the block in which they are declared. In addition, unlike var, variables declared using let aren’t hoisted. If you reference a variable in a block before the let declaration for that variable is encountered, this results in a ReferenceError. But what does this mean in practice? Is it only good for newbies? Not at all!

To explain you why you’ll love let, consider the following code taken from my article 5 More JavaScript Interview Exercises:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', function() {
    console.log('You clicked element #' + i);
  });
}

Here you can recognize a well-known issue that comes from variable declaration, their scope, and event handlers. If you don’t know what I’m talking about, go check the article I mentioned and than come back.

Thanks to ES6, we can easily solve this issue by declaring the i variable in the for loop using let:

var nodes = document.getElementsByTagName('button');
for (let i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', function() {
    console.log('You clicked element #' + i);
  });
}

The let statement is supported in Node and all modern browsers. There are, however, a couple of gotchas in Internet Explorer 11 which you can read about in the ES6 compatability table.

A live demo that shows the difference between var and let is shown below and is also available at JSBin:

ES6 in Action: let and const on jsbin.com

const

const addresses the common need of developers to associate a mnemonic name with a given value such that the value can’t be changed (or in simpler terms, define a constant). For example, if you’re working with math formulas, you may need to create a Math object. Inside this object you want to associate the values of π and e with a mnemonic name. const allows you to achieve this goal. Using it you can create a constant that can be global or local to the function in which it is declared.

Constants defined with const follow the same scope rules as variables, but they can’t be redeclared. Constants also share a feature with variables declared using let in that they are block-scoped instead of function-scoped (and thus they’re not hoisted). In case you try to access a constant before it’s declared, you’ll receive a ReferenceError. If you try to assign a different value to a variable declared with const, you’ll receive a TypeError.

Please note, however, that const is not about immutability. As Mathias Bynens states in his blog post ES2015 const is not about immutability, const creates an immutable binding, but does not indicate that a value is immutable, as the following code demonstrates:

const foo = {};
foo.bar = 42;
console.log(foo.bar);
// → 42

If you want to make an object’s values truly immutable, use Object.freeze().

Browser support for const is equally good as for let. The statement const is supported in Node and all modern browsers. But here, too, there are some gotchas in Internet Explorer 11, which you can read about in the ES6 compatability table.

An example useage of const is shown below:

'use strict';

function foo() {
  const con1 = 3.141;
  if (con1 > 3) {
    const con2 = 1.414;
    console.log(con1); // prints 3.141
    console.log(con2); // prints 1.414
  }
  console.log(con1); // prints 3.141
  try {
    console.log(con2);
  } catch(ex) {
    console.log('Cannot access con2 outside its block');
  }
}
foo();

A live demo of the previous code is shown below and also available at JSBin.

ES6 in Action: let and const on jsbin.com

Conclusion

In this tutorial, I’ve introduced you to let and const, two new methods for declaring variables that were introduced to the language with ES6. While var isn’t going away any time soon, I’d encourage you to use const and let whenever possible to reduce your code’s susceptibility to errors. By way of further reading, you might also like our quick tip How to Declare Variables in JavaScript, which delves further into the mechanics of variable declaration.