Top 7 features of ES6 in Javascript

1.let and const keyword

Both the keywords enables the user to define variables, on one hand 'let' keyword is kinda similar to 'var' it can be changed across the code.

let a = 10;
console.log(a) //10

On the other hand 'const' keyword enables the user to define a constants. unlike 'let' and 'var' you can't change or reassign this variable

const PI = 3.14;
console.log(PI); //3.14

In case of objects or array

const obj1 = {name : "John", city:"NewYork"};
obj1.name = "Mike"; //this is valid
obj1 = {name : "Mike", city: "NewYork"} //this is not valid

const arr1 = [1,2,3];
arr1.push(4); //valid
arr1.pop(); //valid
arr1 = [1,2] //not valid

Just remember you can't reassign.

Both are block scoped, let say you define one variable into an if block using 'var' it will be valid through the whole function. But if you define using 'let' or 'const' it will be valid only into that particular if block.

function something() {
if(true) {
    var a = 10;
}
console.log(a); //prints 10
}
something();

If you use const or let

function something() {
if(true) {
    let a = 10;
}
console.log(a); //Reference Error
}
something();

2.Arrow Function

It provides a more concise syntax for writing function expressions by removing 'function' and 'return' keywords.

Arrow functions are defined using the fat arrow ( => ) notation.

//Arrow function
let sum = (a,b) => a+b;
console.log(sum(5,10));  //prints 15

But if there are multiple expressions in the function body, we need to wrap it with curly braces.We also need to use the 'return' statement to return the required value.

3.Default Parameters

In ES6, users can provide the default values right in the signature of the functions. But in ES5, OR operator had to be used.

//In ES6
let calculateArea = (height = 100, width = 50) => {
    //logic
}

//In ES5
var calculateArea = function(height,width) {
    height = height || 50;
    width = width || 100;
    //logic
}

4.Template Literals

ES6 introduces very simple string templates along with placeholders for variables. The syntax for using the template string is ${YOUR_VARIABLE} and it should be used inside of the back-ticked string.

const firstName = "John";
const lastName = "Doe";
let name = `My name is ${firstName} ${lastName}`

5.Enhanced Object Literals

ES6 provides enhanced object literals which make it easy to quickly create objects with properties inside the curly braces. It applies when the variable name and key property of your object is same.

function getName(firstName,lastName) {
   return {
      firstName,
      lastName
   }
}

console.log(getName("John", "Doe")); //Outputs {firstName :"John", lastName: "Doe" }

6.Destructuring Assignment

Destructuring is one of the most popular features of ES6. It can be applied only in non-primitive data types(i.e object and array). Just as enhanced object literals you can use the property key of an object as the variable.

//Object - mapped through keys
let Person = {id : 1, name:"Peter", age: 24}
let {name,age} = Person
console.log(name) //Outputs "Peter"
console.log(age) //Outputs 24

//Array - mapped through index
let apps = ["Netflix", "Amazon", "Whatsapp"];
let [a,b] = apps;
console.log(a); //Outputs "Netflix"
console.log(b); //Outputs "Amazon"
let [,c,d] = apps;
console.log(c); //Outputs "Amazon"
console.log(d); //Outputs "Whatsapp"

You can use alias, suppose if you want that particular destructured variable name as some other name you can use aliases. Let me explain with an example.

//Object
let obj1 = {name1 : "Mike", name2:"Smith"};
let {name1 : firstName, name2 : lastName} = obj1;
console.log(firstName); //Outputs "Mike"
console.log(lastName); //Outputs "Smith"

//I am pretty sure you won't face this problem but in case

let obj2 = {"first Name" : "Mike", "last Name":"Smith"}; //this is valid in JS objects
let {"first Name" : firstName, "last Name" : lastName} = obj2;
console.log(firstName); //Outputs "Mike"
console.log(lastName); //Outputs "Smith"

7.Spread Operator

This is also one of the most used ES6 features. The javascript spread operator (...) allow us to quickly copy all or part of an existing array or object into another array or object.

//Array
const oddNumbers = [1,3,5,7];
const evenNumbers = [2,4,6,8];
const numbersCombined = [...oddNumbers, ...evenNumbers]; //Outputs [1,3,5,7,2,4,6,8]

//Objects
const name = {
   firstName : "Terry",
   lastName : "Brown"
}

const details = {
   age : 42,
   city : "New Jersey"
}

const fullDetails = {...name, ...details};
console.log(fullDetails); //Outputs { firstName : "Terry", lastName : "Brown",  age : 42,city : "New Jersey" }

The spread operator is often used in combination with destructuring. but called as rest parameter

//Array
const numbers = [1,2,3,4,5,6,7,8];
const [one, two, ...remainNumber] = numbers;
console.log(remainNumbers); //[3,4,5,6,7,8]

//Object
const Person = {id : 1, name : "Terry", age: 42, city: "New Jersey" };
const {id, ...rest} = Person;
console.log(rest); //Outputs { firstName : "Terry", lastName : "Brown",  age : 42,city : "New Jersey" }

I hope this would be useful for you guys. Happy Coding. Kudos.

Blog