Many of you heard about ECMAScript, and you know it is related to JavaScript - but how? ECMAScript is a scripting-language specification, a standard that defines how to use JavaScript, and what we can accomplish with it. The latest version is ECMAScript 6, which comes with a lot of new features that make programming easier. This post will introduce the most useful ones - at least in my opinion.

let

The let keyword is used to declare local variables whose existence is limited to the scope of a block. The block can be a statement, an expression or a function. Variables declared in this manner are called block scoped variables, while variables declared with a var keyword are called function-scoped variables – if they are declared inside a function, they are limited to its scope; otherwise, they are global. Using let instead of var for defining variables can make code easier to read, prevent scoping mistakes, and prevent accidental bugs that are hard to notice. For example:

let x = 1;
if (true){
   let y = 2;
}
console.log(x); // 1
console.log(y); // y is not defined

The second console.log() will throw an exception because y is defined using the let keyword inside a block of an if statement, and can be used only within that block. Imagine that you, somewhere in your code, forget that you already defined a variable, and try to define it again in the same scope - for example:

var a = 0;
var a = 1;
console.log(a); // 1

Why did that happen? The second variable a has overwritten the first variable, a, without any warning. That way you could easily end up with a bug wich is hard to notice if you work on a large project. Let’s see what will happen in the previous example if let is used instead of var:

let a = 0;
let a = 1;  // Duplicate declaration "a"
console.log(a);

The compiler will throw an exception, warn us about trying to define a variable that was already defined, and will not execute the last line.

Const

The const keyword is used to declare read-only variables – variables that cannot be reassigned. The syntax for defining such variable is as follows:

const pi = 3.141;

Now the variable pi is a constant with value 3.141, and cannot be reassigned. Let’s look what will happen if you try to do the opposite:

pi = 3; // "pi" is read-only

The compiler will throw a read-only exception. This is also the main purpose of introducing const keyword - to provide protection from accidental reassigning of variables that are meant to be constants. Variables defined with the keyword const are also block scoped variables, so they have the same characteristics as if they were defined using the let keyword.

Default parameter values

In ECMAScript5, there is no way to define default values for function parameters. If you still wanted to do that, you would have to check if the parameter that is passed to a function is undefined, and if that is the case, assign the default value to it. ECMAScript 6 resolved that problem by giving us the easier way to define default values for function parameters, like in the following example:

function testFunction(x, y = 1, z = x + 1){
     return x / y + z;
};
let result = testFunction(1);
console.log(result); // 3

If you look at the third parameter of testFunction, you will notice that the default parameter value can also be an expression.

Arrow functions

An arrow function expression provides a new, shorter syntax for defining functions using the => operator. The syntax is the following:

let testFunction = (x, y) => {
   let sum = x + y;
   return sum;
};
let result = testFunction(2,3);
console.log(result); // 5

In testFunction, there was no need to use {}. Where {} are not used, the value of the statement behind the => operator is automatically returned. So the shorter way to write testFunction would be:

let testFunction = (x,y) => x + y;

Spread operator

A spread operator is represented by the ... token and is used to split an iterable object into individual values. In most cases, it is used to spread an iterable object into arguments that are passed to a function. Let’s see how we can use the spread operator to pass data to testFunction:

let testFunction = (x, y) => x + y;
let data = [2,3];
let result = testFunction(...data);
console.log(result); // 5

Using the spread operator, you can also make array values a part of an another array:

let firstArray = [3,4];
let secondArray = [1,2,...firstArray, 5];
console.log(secondArray); // Array [1, 2, 3, 4, 5]

Array destructuring assignment

An array destructuring assignment extracts values of an iterable object and assigns those values to individual variables. For example, in ECMAScript 6, this can be written:

let testArray = [1, 2, 3];
let x, y, z;
[x, y, z] = testArray;
console.log(x, y, z); // 1 2 3

instead of assigning each variable x, y, and z specific array elements like this:

let testArray = [1, 2, 3];
let x, y, z;
x = testArray[0];
y = testArray[1];
z = testArray[2];
console.log(x, y, z); // 1 2 3

All you need to do is put variables to which you want to assign values on the left side of an assignment operator, and the array where the values will be stored on the right.

Classes

ECMAScript 6 gives us a new way of creating classes, using the keyword class. The class is created this way needs to have a constructor - a method called whenever an instance of that class is created. For example:

class A{
  constructor(a){
    this.a = a;
  }
}

To create an instance of class A, use the following syntax:

let obj = new A(1);

The class can also inherit static and non-static properties from another class, for example:

class B extends A{
  constructor(a,b){
    super(a);
    this.b = b;
  }

  print(){
    console.log(this.a, this.b);
  }
}
let obj = new B(1,2);
obj.print(); // 1 2

Notice the keyword super in the example above. It can be used in a class constructor to call the parent constructor or can be used inside a class method for referencing static and non-static methods of the parent constructor.

There are more features in ECMAScript 6 which I didn’t mention in this blog. You can find out more in the official documentation.