ECMAScript 6.
Tags: javascript, ecmascript, es6
Published: 2021-08-18 23:20:06


## Introduction

ECMAScript 6, also known as ECMAScript 2015 is the next version of Javascript and became a standard in June 2015.

ES6 is a significant update to the language since ES5 back in 2009.
It’s the same old Javascript as we know but with a more beautiful syntax and more features.

It’s goal generally is to be a better language! It lets us code faster, safer and more efficient.

## Top Features


- Let + Const.
- Arrow Function
- Rest + Spread Operators
- For-of Loop
- Template Laterals
- Destructing Arrays + Objects 

### Let + Const:

ES6 provides two new ways to declare variables: `let` and `const`, which mostly replace the ES5 way of declaring variables, `var`. `let` works similarly to `var`, but it allows block-scoping that is to say that the variables created are only readable within the block in which it’s created.  `var` is function-scoped. 

*For instance*
    
    if (true) {
    var age = 25
    };
    console.log(age)// returns 25.
    //Now replacing the var keyword with the let keyword
    if (true) {
    let age = 25
    };
    console.log(age)// This will throw an error because the let keyword is block-scoped which means its only readable within the curly brackets.

`const`  acts like `let`, but the variable you declare must be initialized immediately, with a value that cannot be changed afterwards.


    const num = 123;

NOTE:  `const` means that once the variable is declared, the variable itself can’t be changed. So if the variable is for instance an object, the properties of that object can still be changed.


### Arrow Function(=>() ):

The huge arrow function is introduced in ES6 and it simplifies the traditional method of writing Functions.


    //Traditional method
    function abc () {
    return "Hello"
    };
    abc();// returns "Hello"
    //The New Arrow Function
    let abc =()=> "Hello"// returns "Hello" also

Passing arguments in the new arrow function can further be simplified but it’s only when passing one argument, the empty brackets can be removed and the function would still run but when passing more than one argument the brackets must be present.


    var abc = sum => sum + 2;
    console.log(abc(8));// returns 10 

Another important thing to know is the behavior of arrow function and the Lexical this 
Let’s run some html snippets and create a button called check,  using querrySelector to select the button, then try to get the “this” property in both the traditional and the arrow methods of defining functions.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <button> Check </button>//create a button 'Check'
    <script>
    var button = document.querrySelector('button');
    function abc () {
    console.log(this)
    };
    button.addEventListener('click' abc)
    </script>
    </body>
    </html>

In the above code the lexical this will print the button object because it is the button that called the function abc.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <button> Check </button>//create a button 'Check'
    <script>
    var button = document.querrySelector('button');
    var abc2 =()=> console.log(this);
    button.addEventListener('click' abc2)
    </script>
    </body>
    </html>

when check button is clicked the lexical this here will print the window object not minding where or what is calling it.

The different properties of the lexical this in the functions above are important notes to take while working or building a project.


### Rest and Spread Operators:

Both the rest and the spread operator are written as three consecutive dots (…). 

#### Rest Operator

The rest operator is an amazing addition of the ES6, it kind of converts a list of values or numbers that has been  initialized to to an array of values or numbers 
You can think of the rest parameter as the opposite of the spread operator. Because just as the spread operator allows you to expand an array into its individual elements, the rest parameter lets you bundle elements back into an array. 

*Let’s see some examples*

    const odd = [3,5,7,11,13];
    const [a,b,...c] = odd;
    console.log(a,b,c);// returns 3 5 [7,11,13]
    //another example
    const num = [1,2,3,4,5];
    function totalSum(sumAll){
    var result = 0;
    for(i = 0; i < sumAll.length; i++){
    result += sumAll [i];
    }
    return result;
    }
    console.log(totalSum(num));// returns 15. the summation of number in
    array num.
    //Consider a situatiion where we are presented with just a list of 
    //numbers to work with a kind of free arguments. 
    //the rest parameter will be added to our function argument 
    
    function totalSum(...sumAll){
    var result = 0;
    for(i = 0; i < sumAll.length; i++){
    result += sumAll [i];
    }
    return result;
    }
    console.log(totalSum(30,40,50,60));// returns 180, which is correct.

#### Spread Operator

The spread operator was introduced in ES6. It provides you with the ability to expand iterable objects into multiple elements.
One can summarily say that the rest operator collects a list of numbers or values and make an array of numbers while the spread does exactly the opposite it collects an array of numbers or values and form a list of numbers or values.

 *Let’s see some examples*

    const num = [1,2,3,4];
    const [a,b,c,d] = num;
    console.log(c,d);// returns 3 and 4
    //let's log the spread operator with the const variable 
    console.log(...num);// returns 1 2 3 4
    // another example
    let num = [1,2,3,4,5];//an array of numbers
    console.log(Math.max(num));// returns NaN. This is because Math.max is
    // a function that uses a list(not array) of numerical values passed as //parameters to return the highest value.
    
    console.log(Math.max(...num);// returns 5, which is what is expected.
    //what happened was that from num array list numbers was formed using
    // the spread operator(...) 



### The For-Of Loop.

The `for-of` is a new loop in ES6 that replaces both `for-in` and `forEach()` and supports the new iteration protocol. Used to also loop over iterable objects (Arrays, strings, Maps, Sets).


    const iterable = ['a', 'b'];
    for (const x of iterable) {
        console.log(x);
    }
    
    // returns a b
    //Another example
    //break and continue work inside for-of loops:
    
    for (const x of ['a', '', 'b']) {
        if (x.length === 0) break;
        console.log(x);
    }
    // returns a
    //Another example
    let finalResults = [1.25,2.10,5.2];
    for (let myResult of finalResults){
    console.log(myResult);
    }// return a list of values
    // 1.25
    //2.10
    //5.2


### Template literals

Template literals are quite simply the easiest way to improve your JavaScript code readability when working with Strings. They are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.

*See example*

     let name = 'Melvin';
    let description = `
    Hello I'm ${name}`;
    console.log(description);// returns Hello I'm Melvin. Awesome

we can accessed our data from inside the string with the ‘$’ sign we can as well add other values inside the curly bracket that holds our name variable.

*See example*

    let name = 'Melvin';
    let description = `Hello I'm ${name +' Chidi.'};
    console.log(description);// returns Hello I'm Melvin Chidi.

we  can even embed calculations in the template provided the calculations are in string form.


### Destructuring Array + Object

Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. That is, we can extract data from arrays and objects and assign them to variables.

#### Array
In destructuring array ES6 made it so easy and simple


    let num = [1,2,3.5,4];
    [a,b,c,d,e] = num;
    console.log(a, b);// return 1 2, just as expected

Now if we try to log [e] to the console it will return undefined because the num array have just four values, so [e] is left out without a value. But we decided to be fair to [e] and added a default value to it.


    [a,b,c,d,e = 5] = num;

Now if we log [e] to our console it will return 5, and that’s exactly what we wanted. what if we decide to correct [c] so we get rid of the decimal and have all whole numbers


    [a,b,c = 3,d,e] = num;

If we log [c] to our console it will still return 3.5 because it wasn’t undefined, it has been initialized.
That’s to say that we can only edit or add values to undefined variable.
Another important note in destructuring array is how simple we can write our code and still achieve our desired results


    let [a,b,c,d,e] = [1,2,3.5,4];
     console.log(a+b*e);// returns 12, fewer codes and desired result.

#### Object

Basically, some of the methods in the array destructuring still holds in the object. 

*See example*

    let object = {
    name: 'Melvin',
    age: 28
    welcome: function(){
    console.log('Welcome Dear!')
    }
    let {name, age,welcome} = object;
    };
    console.log(name,age)//returns "Melvin" 28
    //If we call our welcome function 
    welcome();// it will print "Welcome Dear"

One important thing to note in object destructuring is that we must use the same names in object outside our object block. If at anytime we decide to change any variable inside our object block we would do that thus. 

*See example*

    //we are going to change our 'name initial variable to 'myName'
    let {name:myName, age,welcome} = object;
    // now if we want to access the name value inside our object block we 
    //will now use myName instead of name
    console.log(myName)// returns 'Melvin'
    console.log(name)// now throws an error.

Generally, in destructuring array we will be referencing the array position but destructuring  object we deconstruct it by name.


## What’s next?

This was just a brief introduction to get you familiar with ES6 and its new features. Now you wanna learn more, right? So prepare yourself for lots of awesomeness! Here are some great resources that help you learn more:

1. [es6features](https://github.com/lukehoban/es6features#readme) repo explained ES6 features in more details.