Voice of a Developer: JavaScript ECMAScript 6 Features v1 - Part Nineteen

JavaScript is a language of Web. This series of articles will talk about my observations  learned during my decade of software development experience with JavaScript.

Before moving further let us look at the previous articles of the series:

In the last article we learned about ECMAScript 6 and now we will understand some features which developers can use to write good code.

  1. Let keyword

    We know that var is used to declare variables in JavaScript. JavaScript supports hosting which creates a function level scope than block level scope like in most programming languages. Example- self invoking function print value of “i” outside “for” loop also.

    code

    Therefore, scope of ‘i’ is not limited to {} within ‘for’ but it is bind to the function.

    LET keyword allows developers to declare local variables within the scope of a block. We’ll tweak the above example and notice the difference.

    code

  2. Arrow functions

    I think arrow functions are syntactic sugar for developers. These are less verbose, and has a shorter syntax as compared to function expressions. Example

    Example

    Square is an arrow function, accepts a single argument and return value implicitly. To me it also resembles functional programming aspect where style of programming is imperative than declarative.

    If I transform the above code in ES5, it will transform into below code but with same output.

    code

  3. For..of statement

    It iterates over arrays or other iterable objects. The code gets executed for each element inside the object. Look at comparison of code below:

    ES5ES6
    let arr = [1, 2, 3, 4, 5];
    let sum = 0;
    for (var i= 0;i< arr.length; i++) {
    sum += arr[i];
    }
    console.log(sum); //sum will be 15
    let arr = [1, 2, 3, 4, 5];
    let sum = 0;
    for (let i of arr){
    sum += i;
    }
    console.log(sum); //sum will be 15

    We could notice difference in ‘for..of’ implementation in constrast with the loop we’re using for past many years. In ES5 we have another loop available which is forEach. The disadvantage of forEach is you cannot use break statement.

    code

  4. Templates

    It is an alternative for string concatenation. It creates templates to embed values. In C#, C programming language there is such functionality available:

    Example in C#:

    Console.WriteLine ("{0}, {1}", "Hello", "World"); //Hello World
    Console.WriteLine (string.Format("{0}, {1}", "Hello", "World"));

    Similarly, in ES6 we have templates available for substitution of value

    let person = { title: 'Ms', fname: 'John', lname: 'Doe'};
    let template = `${person.title} ${person.fname} ${person.lname}!`;
    console.log(template); // Ms John Doe!

  5. Const Keyword

    We can create immutable variables, by using const keyword. This is common in other programming languages but ES6 adopted now. Variable created by const is readonly so after declaration and assignment it is read-only.

    code

Summary

Next article will talk about another set of features in ES6.