Demystifying ES 6+

Demystifying ES 6+

by Ore Adeleye

Many sololearners complain that ES 6 is complex and not easy to understand. That is not true. The purpose of ES 6 is to make JavaScript more fun and easy.

I hope with this tutorial, I will demystify ES 6+ features in a way everyone with a basic knowledge of JavaScript can understand.

JavaScript - the right way

There are many ways to solve a problem in JavaScript but there is always a best way. At the end of this tutorial you will be fully empowered to write JavaScript in a better, more efficient way with fewer lines of codes. Let's get started

ES 6 strings

Before ES 6, strings are not dynamic. They cannot span multiple lines or evaluate expressions.

Comparison:

Before ES 6

var string = "Hello, " + (name || "User");

ES 6

const string = `Hello, ${name || "User"}`;

MDN documentation

Fat arrow functions

Consider the following code snippet

const dialog = {
    message: 'Welcome,',
    setDisplayMessage(...users) {
        return users.map(function (user) {
            return `${this.message} ${user}`;
        });
    },
};

Below are a few problems with this approach

The anonymous function creates a new this context, so this.message is undefined.
The code is hard to read

The solution - Fat arrow functions

Fat arrow functions(aka arrow functions) is a shorthand way of writing functions introduced in ES 6.

Instead of this

function f1(arg1){
    return 1;
}

Do this

const f1 = arg1 => 1;

Note the absence of parentheses and curly braces. The parentheses can be avoided if there is exactly one argument. The curly braces can be avoided if there is only one statement.

MDN documentation

Variables

Before ES 6, All variables in JavaScript are global variables. That means a variable, once declared, can be accessed anywhere within or without the block it was declared. That made JavaScript codes unpredictable. That has changed. ES 6 introduced two new keywords — const and let. They are similar in that any variable declared with these keywords is block-scoped. That is, it is accessible within the block and not without.

Differences

const variables must be assigned during declaration. They cannot be re-assigned.

let variables can be declared without being assigned. They can be re-assigned as many times as needed.

const a;
//Syntax Error: missing initializer in const declaration

const a = 9; //This is right

let b = 9; //This is right
b = 10; //Also right

Spread and Rest (…)

The powerful three dots operator … can be used for 2 major purposes.

To spread an array or object

const arr1 = [4, 5];
const arr2 = [1, 2, 3, ...arr1];
//arr2 now contains 1, 2, 3, 4, 5

const obj = {'a': 1, 'b': 2, 'c': 3};
const obj2 = {...obj, 'b': 3};
//obj2 is now {'a': 1, 'b': 3, 'c': 3}

As rest parameters The difference between rest and spread is that spread spreads the array entries into individual values while rest combines individual values into an array. They are two opposite operations with the same … operator.
```
function add(...numbers) {
    let result = 0;
    for (num of numbers)
        result += num;
    return result;
}

console.log(add(1, 2, 3, 4, 5)); //15
```

Spread MDN documentation

Rest MDN documentation

Generators

This is probably the most confusing ES 6 topic for beginners. Generators are easy to use if you get to understand them.

Consider the following code snippet

function* iterateOdd(limit) {
    let count = 0;
    for (let num = 1; num < limit; num+=2) {
        count++;
        yield num;
    }
    return count;
}

This is a generator function. Notice the * symbol in the function declaration and the yield keyword.

A generator function is a function that does not execute completely at once. When a generator function is called it runs until it encounters a yield statement after which it returns. When called again. It begins execution from where it stopped.

The above function will iterate through all odd numbers. The value of the current odd number is stored in the .next() method of the function and the present count is returned by the function.

const oddsBelow50 = [...iterateOdd(50)];
console.log(oddsBelow50);

MDN documentation

Improved for loops

In ES 6, there are two new kinds of for loops — for…of and for…in. The former is used to iterate over iterables while the latter for iterating over objects. Since ES8 for…in can also be used for objects. For more details on for…in and for…of see this documentations.

for…of MDN documentation

for…in MDN documentation

Destructuring

A notable feature of ES 6 is destructuring assignments. This means that collections — array and objects — can be unpacked or extracted to variables in a one-liner. Let's see that in action.

const color = [255, 200, 168];
const [red, green, blue] = color; //array destructuring
console.log(blue); //168

Note that the order is very important. You can skip elements you don't need.

const [,, blue] = color; //Elision
console.log(blue);

This is known as Elision.

Object can be destructured in a similar syntax except that we use curly braces to replace the array square brackets.

const file = {
    name: 'favicon',
    type: 'ico',
    path: 'usr/Pictures'
};

const {name, type} = file; //Object destructuring

You can change the variable names easily.

const {name : fileName, type} = file;

Note that this does not change the key name.

Also you can set default values with the = operator.

const {name, type = 'txt'} = file;

Computed key values can be also be used using square brackets.

const prop = 'path';
const {[prop]: folder} = file;

MDN documentation

Promises

At the beginning of the tutorial, I promised to demystify ES 6+. That is a promise and like ES 6 promises, real life promises have 3 states:

Pending - At the beginning of the tutorial, you are not sure whether the promise would be fulfilled or not.
Fulfilled - At the end of the tutorial the promise might be fulfilled. I hope it does.
Rejected - If the promise no longer holds or is not fulfilled for any reason. Then it is said to be rejected.

The syntax is like this:

const isUseful = true;

const demystify = new Promise(
    (resolve, reject) => {
        if (isUseful) {
            const feedback = 'I learnt a lot';
            resolve(feedback);
        } else {
            const reason = new Error('It is sooo boring');
            reject(reason);
        }
    }
);

We can consume promises with .then and .catch blocks. Here is the code to consume our demystify promise

demystify
.then(fulfilled => console.log(fulfilled))
.catch(error => console.error(error.message));

Calling a method on the return value of another method is called chaining.

MDN documentation

Exponentiation operator

Since ES 7, JavaScript now supports using double asterisks for exponentiation.

Comparison

Before ES 7,

var x = 2 * (Math.pow(2, Math.pow(4, .5)));

ES 7,

const x = 2 * (2**4**.5);

MDN documentation

async and await

async functions are a new addition in ES 8. As the name suggests they are used to define asynchronous functions. async functions always return promises. The await keyword is often used in async functions.

The await keyword pauses the function execution till the promise resolves. During this pause, other codes outside the function will still run. Once the async function 'returns', the function code continues execution from the statement after the awaited statement. See an example

async function isWorthIt() {
    try {
        console.log('Is it worth it?');
        let feedback = await demystify;
        console.log(feedback);
    } catch (error) {
        console.log(error.message);
    }
}

This is particularly useful in ajax.

MDN documentation