ECMAScript 6, JavaScript Core
by strongeleeroy

ECMAScript 6: Why should I use it? | Part I

ECMAScript 6: Why should I use it? Part I

What is ECMAScript 6?

The most commonly used ECMAScript implementation is our good old friend JavaScript. With ECMAScript 6, we get a few invaluable tools that will make our code better, cleaner and faster.

As if that wasn’t enough reason to start learning about ECMAScript 6, over the next few posts, I’ll introduce you to some of the most useful features that you should start looking into right now!

For part one, we are going to be looking at the following features:

 

Block Scoped Variables

Using let instead of var, we can declare block scoped variables without hoisting:

let myVar = 5;

if (myVar === 5) {
    let myVar = 10;
    console.log(myVar); // 10
}

console.log(myVar); // 5

Block Scoped Functions

We may also declare scoped functions using curly braces:

function hello() {
    return 'Hello!';
}

{
    function hello() {
        return 'Hi!';
    }
    console.log(hello()); // 'Hi!'
}

console.log(hello()); // 'Hello!'

Constants

A type of variable that cannot be reassigned (often referred to as immutable variable). Even though the variable cannot be reassigned, if it holds an object, that object can still be modified. To declare a constant, we use the const keyword:

const myVar = 5;
console.log(myVar); // 5
myVar = 6; // Type Error: Assignment to constant variable.

Arrow functions

Arrow functions provide a lexically improved version of regular functions, they are easier to read and write, and provide a more logical use of the this keyword. Here’s a few examples:

var numbers = [1, 2, 3, 4, 5, 6, 7, 8];

// ES5
var sum = numbers.reduce(function(prev, next) {
    return prev + next;
});

// ES6
sum = numbers.reduce((prev, next) => prev + next);

// ---------------------- //

// ES5
var even = numbers.filter(function(current) {
    return current % 2 === 0;
});

// ES6
var even = numbers.filter(current => current % 2 === 0);


// ---------------------- //

// ES5
var incremented = numbers.map(function(current) {
    return current + 1;
});

// ES6
incremented = numbers.map(current => current + 1);

 

We can also use them in statement bodies:

var numbers = [1, 2, 3, 4, 5, 6, 7, 8];
var even = [];
var odd = [];

// ES5
numbers.forEach(function(current) {
    if (current % 2 === 0) {
        even.push(current);
    }
});

// ES6
numbers.forEach(current => {
    if (current % 2 != 0) {
        odd.push(current);
    }
});

 

When inside an object/class, we can make use of arrow functions to have this be an expected value:

// ES5
function MyClass() {
    this.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    this.odd = [];

    var self = this;
    this.numbers.forEach(function(current) {
        if (current % 2 != 0) {
            self.odd.push(current);  // We must manually reference the class using a variable such as "self"
        }
    });
}

// ES5.1
function MyClass() {
    this.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    this.odd = [];

    this.numbers.forEach(function(current) {
        if (current % 2 != 0) {
            this.odd.push(current); // this is set to the class using bind()
        }
    }.bind(this));
}

// ES6
function MyClass() {
    this.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    this.odd = [];

    this.numbers.forEach((current) => {
        if (current % 2 != 0) {
            this.odd.push(current);  // this refers to the class
        }
    });
}

 

As you can see, arrow functions are incredibly useful, once you start using them, you’ll never go back to regular functions (unless you specifically need them).

You may have noticed that if we only have one function argument, we can ignore the parenthesis altogether. Here’s two examples of function assignments:

// ES5

var logText = function(text) {
    console.log(text);
};

logText('Hello'); // 'Hello'

// ES6

var logText = text => {
    console.log(text);
};

// OR

var logText = (text) => {
    console.log(text);
};

logText('Hello'); // 'Hello'

 

With more than one argument:

// ES5

var sumThree = function(a, b, c) {
    return a + b + c;
};


// ES6

var sumThree = (a, b, c) => {
    return a + b + c;
};

// OR

var sumThree = (a, b, c) => a + b + c;

 

This is one of the features that other programming languages already had, and ECMAScript 6 brings to JavaScript, you’ll love it, trust me!

Default function parameters

In ECMAScript 6, we can set function parameters/arguments to default values, and, if passed in as undefined, they’ll always hold a value:

function sayHi(name = 'Joe') {
    console.log('Hi ' + name + '!');
}

sayHi('Mike'); // 'Hi Mike!'

sayHi(); // 'Hi Joe!'

Spread operator

The spread operator is very handy! It let’s us “spread” elements of iterable collections such as arrays or strings and do things like these:

var myArray = [1, 2, 3, 4];
var myNewArray = [10, 20, ...myArray, 30];

console.log(myNewArray); // [10, 20, 1, 2, 3, 4, 30]

 

function myFunction(firstname, lastname, ...numbers) {
    console.log(firstname + ' ' + lastname + ' has ' + numbers.length + ' numbers!');
}

myFunction('John', 'Doe', 1, 2, 3, 4, 5); // 'John Doe has 5 numbers!'

 

var myString = 'Hello!';

var spreaded = [...myString]; // ['H', 'e', 'l', 'l', 'o', '!']

String Interpolation and multi-line strings

String interpolation and multi-line strings are awesome. They are defined using the back-quote character `, we can then interpolate using ${…}. Here’s some examples:

// ES5

var myString = '
‘ + ‘Hello World

‘ + ‘

‘; // ES6 var myString = `

Hello World

 

`;

 

var myName = 'Gorka';
var numOne = 5;
var numTwo = 5;

// ES5
var text = 'The name is ' + myName + ' and the sum is: ' + (numOne + numTwo);

// ES6
var text = `The name is ${myName} and the sum is: ${numOne + numTwo}`;

 

Next up, in part two of this series, we’ll look at these ECMAScript 6 features:

  • Enhanced object properties
  • De-structuring assignments
  • Modules
  • Classes
  • Promises

Don’t miss it!