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 functionlet myFunction = function() {
return “Welcome to JavaScript World!”;
}
//Arrow functionlet myArrowFunction =()=> {
return “Welcome to JavaScript World!”;
}
//Arrow function with argumentslet myArrowFunction =(name)=> {
return `Hello ${name}, welcome to JavaScript World!`;
}
//Arrow function for single line statement onlylet myArrowFunction =(name)=> `Hello ${name}!`;

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

//without arrow functionexport 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 functionexport 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 functionlet 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 destructuringlet [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 functionlet 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 destructuringlet {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 constconst myName = "Chanchala"; //you cant re-assign this variable againconst result = [70, 80, 75, 98];result.push(95)//you can update the content since the content is not immutablelet 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";//Previouslylet greeting = "Hello"+ " "+firstName+" "+lastName+"!";//Nowlet greeting = `Hello ${firstName} ${lastName}!`

--

--

--

Technical Writer, Software Developer, Blogger, and Career Development Coach…

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

VUE WITH TYPESCRIPT — YOUR FIRST COMPONENT

Creating a Realtime Reactive App for a Collaborative Domain

Angular fallback route

Generate TypeScript interfaces from Java Classes

Apollo Server 1.0 — A GraphQL server for all Node.js frameworks

Auto Add Country Code in Input using JavaScript

How To Build an Electron App With ReactJS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chanchala Gorale

Chanchala Gorale

Technical Writer, Software Developer, Blogger, and Career Development Coach…

More from Medium

The Horsepower of the V8 JavaScript Engine

How to get query params from a URL in JavaScript

WTF JavaScript: A Variable with Side Effects

How to mock the tricky things with Jest