ES6 Features that every front end developer should know
By: Prasad Sonawane
Tags: JavaScript, Interview Questions, Angular, ES6, Features

We all know ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. so we will discuss few features of it -

let Keyword const Keyword for…of Loop Template Literals The default values for function parameters Arrow functions Classes Modules Rest Parameters Spread Operator Destructing Assignments Multi-Line String

1. let Keyword

ES6 added the new let keyword for declaring variables. Before ES6, we can declare a variable using var keyword.

Variables declared with the var keyword is function-scoped and hoisted at the top within its scope

variables declared with let keyword is block-scoped and they are not hoisted.

let keyword inside a loop, it does not exist outside of the loop.

// ES6 syntax

for(let i = 0; i < 3; i++) {

console.log(i); // 0,1,2,3

}

console.log(i); // undefined // ES5 syntax

for(var i = 0; i < 3; i++) {

console.log(i); // 0,1,2,3

}

console.log(i); // 3

2. const Keyword

ES6 supports constants and also known as immutable variables i.e variables cant be re-assigned with new content.

NOTE: Object and Array can be altered.

const PI = 3.14;

console.log(PI); // 3.14 PI = 10; // error

3.for…of Loop

for...of the loop allows us to iterate over arrays or other iterable objects and provide conveniently of operator to iterate over all values of an iterable object

for...of the loop doesn't work with objects because they are not iterable.

// Iterating over array

let names= [“Ram”, “Sham”, “Sita”, “Gita”]; for(let name of names) {

console.log(letter); // Ram,Sham,Sita,Gita

} // Iterating over string

let greet = “Welcome!”; for(let character of greet) {

console.log(character); // W,e,l,c,o,m,e

}

4. Template Literals

In ES6, We can use a different way to create multi-line strings and string interpolation. the syntax ${value}.

Template literals are created using back-tick ( ` ` ).

//ES6

ageValue = 10;

var myAge = `My age is ${ageValue}`; //ES5

ageValue = 10;

var myAge = 'My age is' +ageValue;

5. The default values for function parameters

ES6 provides default values to the function parameters.

//ES6

function getName(name='virat'){

return `my name is ${name}`;

}

getName(sachin); // sachin

getName(); //virat //ES5

function getName(name){

var nameis = 'my name is' + name || virat;

return nameis;

}

getName(sachin); // sachin

getName(); //virat

6. Arrow functions

It is a very simple and concise syntax for creating functions.

//ES6

let sum = (a, b) => a + b; //ES5

let sum = function(a, b) {

return a + b;

}; alert( sum(1, 2) ); // 3

7. Classes

Classes introduced in ES6 which look similar to classes in another object-oriented language.

We can create a class in ES6 using “class” keyword.

class User { constructor(name) {

this.name = name;

} sayHi() {

alert(this.name);

} } // Usage:

let user = new User(“Sachin”);

user.sayHi();

8.Modules

In ES6 we can use you can use the export or import statement in a module to export or import variables, functions, classes.

//export

export var rollNumber = 30; //import

import {rollNumber} from 'rollnumberModule';

console.log(rollNumber); // 30

9. Rest Parameters

ES6 introduces rest parameters that allow us to pass an arbitrary number of parameters to a function in the form of an array.

A rest parameter is specified by prefixing a named parameter with a rest operator ( ... ) i.e. three dots.

function sortNames(…names) {

return names.sort();

} alert(sortNames(“sachin”, “virat”, “rohit”)); // rohit,sachin,virat

alert(sortNames(“hardik”, “anil”)); // anil,hardik function getNumbers(a, b, ...args) {

return args;

} alert(getNumbers(1, 2, 3, 4, 5)); // 3,4,5

alert(getNumbers(-7, 5, 0, -2, 4.5, 1, 3)); // 0,-2,4.5,1,3

Math.max(arg1, arg2, ..., argN) – returns the greatest of the arguments.

– returns the greatest of the arguments. Object.assign(dest, src1, ..., srcN) – copies properties from src1..N into dest .

10. Spread Operator

It also denoted by three dots(…) as rest operator but perform the opposite operation.

let arr = [3, 5, 1]; alert( Math.max(arr) ); // NaN let arr = [3, 5, 1]; alert( Math.max(...arr) ); // 5 (spread turns array into a list of arguments)

The spread operator can also be used to insert the elements of an array into another array without using array methods like push() , unshift() concat() , etc.

let countries = [“India”, “USA”];

let states = [“Maharashtra”]; // Creating an array by inserting elements from other arrays

let cities = […countries, “pune”,…states]; alert(cities); // India,USA,pune,Maharashtra

11. Destructing Assignments

It is a special syntax that provides us to extract an array or object into a bunch of variables.

Array Destructing Object Destructing

Array Destructing

let cities = [“Pune”, “Mumbai”]; let [a, b] = cities; // Array destructuring assignment alert(a); // Pune

alert(b); // Mumbai

Object Destructing

let cities= {name: “Pune”, population: 6808000}; let {name, population} = person; // Object destructuring assignment alert(name); // Pune

alert(population); // 6808000

12. Multi-Line String

ES6 provides a very simple multi-line string feature you just need to use back-ticks

let title = `Javascript is

very interesting`



let title = ‘Javascript is

’+

‘very interesting’

Thanks for Reading!…✌️

Please claps or comments if you like!👏👏