Top 7 features of ES6 in Javascript
Tags: javascript, es6, react, webdev
Published: 2022-05-04 17:50:11

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

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

```javascript
const PI = 3.14;
console.log(PI); //3.14
```
In case of objects or array
```javascript
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.

```javascript
function something() {
if(true) {
	var a = 10;
}
console.log(a); //prints 10
}
something();
```
If you use const or let

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

```javascript
//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.

```javascript
//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_.

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

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

```javascript
//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. 

```javascript
//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.

```javascript
//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

```javascript
//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.