Es6 Awesomeness (Part I)
Tags: javascript, programming, tutorial, learning
Published: 2018-05-09 14:25:18

---
title: Es6 Awesomeness (Part I)
published: true
description: We would be looking at some of the new concepts and syntax in Es6.
tags: javascript,programming,tutorial,learning
---

The sixth edition of ECMAScript standards, known as Es6 adds significant new syntax for writing complex applications, including classes and modules. Some of this new syntax and concepts we would discuss in a 3 part documentation of my learning, making them as possibly simple as i can.

For this part, we would be looking at the following concepts and syntax:

1. Template Strings
2. Let & Constants
3. For..of
4. Arrow Functions
5. Spread Operator


**1. Template Strings:**
       Es6 has two new kinds of literals: *template literals* and *tagged template literals*. The *template literal* allows to use multiple line strings and expressions. 
`
***Template literals*** 
are enclosed by the back-tick instead of the double or single quotes and expressions can be indicated by the dollar sign and curly braces ${..}. Below are example of template literals at work;

    const firstname = 'johnson';
    console.log(`Hello ${firstname},
    How are you?`);

The above code is equivalent to the below Es5 standard code;
    
    var firstname = "Johnson";
    console.log('Hello '+firstname+', \n How are you?');

Comparing the two  codes snippets we have to agree that Es6 simplified a lot for us. Below is another example showing Es6 template literal in action.

    const  currentYear = 2018;  
    let DOB = 1980;

    console.log(`Subtracting your DOB ${DOB} from the current year, 
    your are ${currentYear-DOB}years old`);

***Tagged Template Literals;***
    
    let a = 1;
    let b = 2;

    let yourString = function(strArray, ...val){
        console.log(strArray);
        console.log(val);
    }

    yourString `Hello ${a},${b} world man ${a+b}`;

*Tagged Template Literal*, is a more advanced form of template literals. With them you are able to modify the output of template literals using a function. The first argument contains an array of string literals ("Hello","world","man" and "" in the above example). The second and each argument after the first one, are the values of the processed (or sometimes called cooked) substitution expressions("1","2","3") in the end your function returns your manipulated string.

Some other string functions in Es6 are, `include`,`startsWith`,`endsWith`, i would explain them just with examples of how they are used, so you could personally copy and run them on your console.

    var stringWord = "Hello World";
    stringWord.startsWith("Hell");

    var stringWord = "Hello world";
    stringWord.endsWith("rld");

Running the above different codes return the Boolean value `true`.
    
    var anyArray = [1,2,4];
    anyArray.includes(1);


**2. Let & Constants:**

***Let:***
The `let` statement declares a block scope local variable and not function level scope like `var`.


    let year = 2018;
    let dob = 1970;


    function calcAge(){
        let age = year-dob;
        if (age > 19){
            let age = "You re young";
            console.log(age);
        }
        console.log(age);
    }

    calcAge();

Redeclaring the same variable within a the same function or block scope raises a `SyntaxError`, and also you can not use a variable outside of its scope; like say trying to access `age` outside of the `calcAge` function would return an `undeclared variable Error`.

 
***Constants:***
    
`const` works like `let`, but the variable you declare must be immediately initialized, with a value that can't be changed afterwards. The `const` declaration creates a read-only reference to a value. Remember the value of a constant cannot change through re-assignment, and it cant be re-declared.

Having `const PI = 3.14` trying to reassign PI, say `PI = 3.12` would return an `uncaught type error`. Just like `let`, `const` cant be accessed outside of its scope, lets take an example to illustrate this and please try to run this code yourself to understand better.


       const PI = 3.14;
       function fun(){
            const PI = 3.121;
            if(true){
                const PI = 3.416;
                console.log(PI)
            }
            console.log(PI);
        }
        console.log(PI);
        fun();

**3. For..of:**
`for-of` is a new loop in Es6 that replaces both `for-in` and `forEach()` and supports the new iteration protocol.The syntax is highlighted below;

    for(variable of iterable){
        statement
    }

Iterating over an Array;
    
    let values = [1,34,20];
    for (let value of values){
        console.log(value);
    }
Iterating over a string;

    let color = "red";
    for(let item of color){
        console.log(item);
    }


**4. Arrow Function:**

Arrow functions are always anonymous. The examples are below:

*Function without any parameters:*
    
    var intro = () => "Welcome";

The above code is equivalent of the below:

    var intro = function(){
        return "welcome";
    }

*Function with 1 parameter:*
    
    var multiplyBy2 = value1 => value1 * 2;
    console.log(multiplyBy2(4));

The above code is equivalent of the below:
    
    var multiplyBy2 = function(value1){
        return value1 * 2;
    }
    console.log(multiplyBy2(4));

*Function with more than 1 parameter:*

    var addBy = (value1,value2) => value1 + value2;
    console.log(addBy(10,30));


**5. Spread operator:**
The spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple variables (for destructuring assignments) are expected.

*Example:*
Common usage of array as arguments to a function is as below:

    function myFunctions(x,y,z){
        console.log(x);
        console.log(y);
        console.log(z);
    }
    var args = [0,1,2];
    myFunctions(args);

With `Es6 spread` you can now write the above as:

    function myFunctions(x,y,z){
        console.log(x);
        console.log(y);
        console.log(z);
    }
    
    myFunctions(...args);

This is it for today guys.