ES6 features you will use repeatedly

ECMAScript 6 or as we know it ES6 released in June 2015 and made the JavaScript friendlier than even by adding new features.

Must know ES6 features as a JavaScript developer

1. Arrow function:
   The arrow function shortens the function syntax.

//JavaScript function
let myFunction = function() {
 return “Welcome to JavaScript World!”;
}
//Arrow function
let myArrowFunction =()=> {
 return “Welcome to JavaScript World!”;
}
//Arrow function with arguments
let myArrowFunction =(name)=> {
 return `Hello ${name}, welcome to JavaScript World!`;
}
//Arrow function for single line statement only
let myArrowFunction =(name)=> `Hello ${name}!`;

In React class components, use the arrow function to avoid function binding with this keyword

//without arrow function
export default class App extends Component{
constructor(){
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Clicked with JavaScript function!');
}
render(){
return (
<button onClick={this.handleClick}>Click me!</button>
)}}
//with arrow function
export default class App extends Component{
handleClick=()=>console.log('Clicked with JavaScript function!');
render(){
return (
<button onClick={this.handleClick}>Click me!</button>
)}}

2. Spread operator

The spread operator is represented with three dots (…). The spread is mostly seen with statements involving operation with arrays or object where the variable consist of more than one value and needs an iteration.

//Instead of just copying the arrays location reference it copyies the actualy content of the arrays
//concatination
let firstArray = [1,2,3,4,5];
let secondArray = [6,7,8,9,10];
let finalArray = [...firstArray, ...secondArray]
//finalArray = [1,2,3,4,5,6,7,8,9,10]
//Constructing
let firstArray = [1,2,3,4,5];
let finalArray = [...firstArray, 6,7,8,9,10]
//finalArray = [1,2,3,4,5,6,7,8,9,10]
//Copy
let firstArray = [1,2,3,4,5,6,7,8,9,10];
let finalArray = [...firstArray]
//finalArray = [1,2,3,4,5,6,7,8,9,10]
//Passing an arguments when calling a function
let finalArray = [1,2,3,4,5,6,7,8,9,10];
let myFunction =(...arg)=>{
   for(let i = 0; i< arg.length; i++){
    console.log(arg[i]);      
   }
}
myFunction(...finalArray);
//recieving an arguments is done with the rest operator, rest operator is also represented with the three dots(...)

3. Destructuring
Destructuring means retrieving specific values from either array or object

let result = [85, 78, 69];
let mathScore = result[0];
let chemScore = result[1];
let phyScore = result[2];
console.log(mathScore, chemScore, phyScore); 
//85, 78, 69
//Array destructuring
let [mathScore, chemScore, phyScore] = result; 
//85, 78, 69
//Array destructuring with default value
//assigning default values: if the value not passed the default values will be used
let [mathScore, chemScore, phyScore, scienScore = 60] = result;
//85, 78, 69, 60
////Array destructuring with default value and function
let calculation =(a, b)=>{
return [a+b, a-b, a*b];
}
let [sum, sub, mult] = calculation(5, 3); //8, 2, 15
=================================================================
let result = {
  math: 85,
  chem: 78,
  phy: 69
};
let mathScore = result.math;
let chemScore = result.chem;
let phyScore = result.phy;
console.log(mathScore, chemScore, phyScore); 
//85, 78, 69
//Object destructuring
let {mathScore, chemScore, phyScore} = result; 
//85, 78, 69
//Object destructuring with default value
//assigning default values: if the value not passed the default values will be used
let {mathScore, chemScore, phyScore, scienScore = 60} = result;
//85, 78, 69, 60

4. Immutable variable (constant)

The immutable variable is declared with const and cannot be re-assigned. It is important to note that the immutable variable makes the variable immutable not its content and that's why you can update values inside an immutable array or object but can not re-assign it.

//Immutable variable declaration with const
const myName = "Chanchala"; //you cant re-assign this variable again
const result = [70, 80, 75, 98];
result.push(95)//you can update the content since the content is not immutable
let myDobYear = 1996;
let currentYear = 2021;
const myAge = currentYear - myDobYear;
//Note: once the value is calculated while execution it can not be re-assigned later

5. String interpolation

One of the great advantages of the es6 is that the simple string generation like a very lengthy process is made simple using backticks (``):

let firstName = "Chnachala", lastName="Gorale";
//Previously
let greeting = "Hello"+ " "+firstName+" "+lastName+"!";
//Now
let greeting = `Hello ${firstName} ${lastName}!`