Learning ES2015

By pferlito

June 3, 2016

JavaScript is changing. In June of 2015 the newest specification of JavaScript known as ECMAScript 2015 or ES2015 was ratified. This is a significant change and the first major update since 2009.

The main browsers have been adopting the new specification in their latest versions and new tools are evolving to allow us to write ES2015 code today.

I have been exploring the many exciting features of ES2015 and will use this blog to report my finding. In this first installment I will cover changes to variable declarations and scoping as well as the new const construct.

Variable declaration and scoping

ES2015 adds the ability to declare block scoped variables. Blocks in JavaScript are anything between {}. Block scoped variables are variables that are only accessible in the block in which they are declared. To fully understand the change let's review how traditional JavaScript handles scoping.

The traditional way - var

Before ES2015 JavaScript variables only had function scope, which means they were accessible throughout the function in which they were declared even if they were declared inside a block and intended only for use in that block. Consider this example code:

for (var i=0; i <= 10; i++) {
  if (true) {  // create block scope
    var dub = i * 2;
console.log(dub); // outputs 20
console.log(i);   // outputs 11

In traditional JavaScript this will output 20 and 11 because the dub variable is accessible outside the if statement block and the i variable is accessible outside the for loop block. This often causes variable name collisions and other unexpected results.

The new way - let

ES2015 introduces block scoped variables. These are variables that are limited in scope to the block in which they are declared. Now the same example using the new let syntax:

for (let i=0; i <= 10; i++) {
  if (true) {  // create block scope
    let dub = i * 2;
console.log(dub); // error - undefined variable dub
console.log(i);      // error - undefined variable i

This produces an error in both cases because dub is limited to the if statement scope and i is limited to the for loop scope. This limits the possibility of variable name collisions.

It's important to understand that var variables will continue to use the old scoping rules.

Declaring Constants with const

Unlike other languages JavaScript has not had constants, values that the program cannot alter during its execution. Now with ES2015 we have them with the const keyword. But unlike other languages a JavaScript const's value is not immutable (cannot be changed) but the identifier cannot be reassigned. For example:

const x = 0;
x = 1; // fails

const y = [0,1,2];
y.push(4); // we can change the array

const y = {firstName: 'Paul'};
y.firstName = 'Peter'; // we can change object keys
y = {color: 'red'}; // this fails

So for arrays and objects (which are the same thing in JavaScript under the hood) we can alter the values as long as we don't reassign the const to a new value. For primitive types we cannot alter the value.

That wraps up this installment of the series. Stay tuned for the next installments in the coming days.

Read More

Learn ES2015
MDN let
MDN const