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

Guest User
4y
6.5k
0
2

Article

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.

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.

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.
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

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.

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.

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!
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.