ES6 Features that every front end developer should know

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 -

1. let Keyword
2. const Keyword
3. for…of Loop
4. Template Literals
5. The default values for function parameters
6. Arrow functions
7. Classes
8. Modules
9. Rest Parameters
10. Spread Operator
11. Destructing Assignments
12. 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.
• 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.

1. Array Destructing
2. 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\n’+
 ‘very interesting’

Thanks for Reading!…✌️

Please claps or comments if you like!👏👏