Post
Ask Question

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

Introduction

 
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, the 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 the style of programming is imperative than declarative.
     
    If I transform the above code in ES5, it will transform into the 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 the comparison of code below:
     
    ES5 ES6
    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 a difference in ‘for..of’ implementation in contrast with the loop we’re using for the past many years. In ES5 we have another loop available which is forEach. The disadvantage of forEach is you cannot use a 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 the const keyword. This is common in other programming languages but ES6 adopted now. Variable created by const is read-only so after declaration and assignment, it is read-only.
     
    code
     

Summary

 
The next article will talk about another set of features in ES6.


Similar Articles