ECMAScript | ES6 | Using javascript in day to day routine

In this part we will go through the ES6 or ECMAScript® 2015 most useful operators in our day to day coding practices.

ES 6 | 2015

Template Literals

With template literals, we can embed expressions and create multi-line strings, even write IIFE which will return printable result to stdout based on some complex operation.

The following depicts the simple use of template literals

simple use of template literals

Or, we even can write multiple lines of expressions or long paragraphs, even we can embed HTML tags too!

Writing multiple lines with some expressions

The spread operator

The spread operator can be used to compose a single value from several other values!. This operator is used to copy / modify array or an object.

In the first example, We put ... (the three dots "..." are the spread operator syntax!)in front of array (minions), which will expand all the elements in minions to individual elements in superVillainGroup array.

In second example, we are trying to copy all babyAntMan properties and respective values into bigAntMan object. We can use this to merge two individual object key value pairs.

Using spread operator to clone properties / elements of object / array

The Destructuring / rest operator

Used to assign known object properties or array elements into a named variables.

In array de-structuring the order is important, where as for object de-structuring the keys are not necessarily in a specific order, so the new variables need to have matching names with the object’s keys.

The ...whatEverVariable maintains all the extra / un-named parameters into a single object / array.

Rest operator to de-structure known properties / elements of object / array.

let and const

var keyword is used to define variables which needs to be accessible by entire enclosing function.

In the below snippet variable y is accessible outside if-block.

var with function scope

let keyword is a used to defined block scoped variables.

In below code snippet, the variable y which is declared with let keyword is only accessible within if block only.

let with block scope

The difference between let and var
* The variables which are declared with var will be hoisted whereas the variables with are declared with let will not be hoisted.
* let keyword wont allow redeclaration of the same variable.
* let is block scoped, where as var is function scoped

const keyword is used to declare a constant variable (a variable with constant value). The variables which are declared with const will have a block level scope just like let, except the value cannot be changed.

declare variable with const keyword

There are some exceptions with objects which are declared with const keyword.
1. we can add new key value pairs of an object
2. we can remove existing properties of an object
3. we can mutate existing property value of an object
The same applies to arrays too!

mutating object properties and values which is declared with const keyword

You can play around with the examples here

For additional information refer to following resources

JavaScript

ECMAScript 2015 Language Specification — ECMA-262 6th Edition