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

Sumit Jolly
8y
3.6k
0
1

Article

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

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:

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

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

Summary

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

Up Next

Ebook Download

View all

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all