How Can We Help?
< All Topics

ES6 in React

ES6, also known as the ECMAScript version 6.

What is ECMAScript?

ECMAScript is a scripting language which is based on specification and standardization by ECMA International Company in ECMA-262 and ISO/IEC 1623. It was created to standardize JavaScript language to bring multiple implementations.

Features of ES6

ES6 has introduced several new features mentioned below:

Variables
Arrow Function
Modules
Classes
Array Methods like map()
Destructuring
Ternary & Spread Operator

Arrow function
Arrow functions are a shorthand syntax for writing function expressions which makes your code more readable and organized. Arrow functions can be declared without the function keyword.

The basic syntax of Arrow Functions:

 const functionName = (parameters) => { return returnValue };

Arrow functions with no parameters:

const add = () => {
return "Hello World"
};

console.log(add());

// Output: Hello World

Arrow functions with parameters:

const add = (a ,b) => {
 return a + b
};

console.log(add(12, 25));

// Output: 37

Arrow function with a single expression (implicit return):

const add = (a,b) => a + b console.log(add(12 , 25))
// output: 37

 

Modules

JavaScript Modules allow you to break up your code into separate files. Modules can be imported and exported.

To define a module, you use the export statement to indicate which parts of the module should be accessible from the outside, and you use the import statement to bring those exported parts into another module.

Named Exports:

Suppose you have a person.js file.

export const name = "Ankit"
export const age = 22
const name = "Ankit"
const age = 22
export {name, age};

 

Default Exports

const person = () =  {
 const name = "Ankit"; 
 const age = "22"
 return `My name is ${name},i am ${age} years old.`
}

export default person;

Import

Named import

import { name, age } from "./person.js";

console.log(`My name is ${name},i am ${age} years old.`);

Default import

import person from "./person.js";

console.log(person())

Classes

A class is a type of function, but instead of using the keyword `function` to initiate it, we use the keyword `class`, and the properties are assigned inside a `constructor()` method.

class Person {
constructor(name) {
this.personName = `My name is ${name}`;
}
}
const Person1 = new Person("Ankit") 

console.log(Person1.personName);

 

Method in Classes

class Person {
constructor(name) {
this.personName = name;
}

sayHello() {
return `My name is ${this.personName}`
}
}

const me = new Person("Ankit") console.log(me.sayHello())
//Output: My name is Ankit

Array Methods like `map()`

In React the .map() array method is very useful. It allows you to create a new array by running a function to each element of an existing array. Example:

const myArray = [
{ id: 1, name: 'Ankit' },
{ id: 2, name: 'Ashok' },
{ id: 3, name: 'Amit' }
]

const names = myArray.map((person) => person.name);
console.log(names);

// output: ['Ankit', 'Ashok', 'Amit']

Destructuring

Destructuring is a way to extract values which we exactly want from objects and arrays into distinct variables. Like:

Destructuring Objects:

const user = {
firstName: "Elon", lastName: "Musk", age: "25",
phoneNumber: "1234567890"
};

const {firstName, age} = user;

console.log(firstName) // output: Elon
console.log(age) // output: 25

Here using the destructuring method I have extracted values from the `user` object and assigned them to variables `firstName` and `age`.

Destructuring Arrays:

const basket = ["Apple", "Banana", "Pineapple", "Orange", "Strawberries"]

const [fruit1, fruit2] = basket;
console.log(fruit1); // Apple
console.log(fruit2); // Banana

Here using the destructuring method I have extracted values from the `basket` Array and assigned them to variables `fruit1` and `fruit2`.

Spread Operator

The JavaScript Spread Operator (…) allows us to quickly copy all or part of an existing Array or object into another array or object. Like this:

const basket = ["Apple", "Banana", "Pineapple", "Orange", "Strawberries"] 

const [fruit1, fruit2, ...restAllFruits] = basket;
console.log(fruit1); // Apple
console.log(fruit2); // Banana
console.log(restAllFruits); // ['Pineapple', 'Orange', 'Strawberries']

Ternary Operator

The ternary operator in JavaScript is a simplified way of writing a conditional statement like
if/else.

The syntax of the ternary operator is as follows:

condition ? expressionIfTrue : expressionIfFalse;

Example of using if/else:

const age = 20;

if(age >= 18) {
console.log("You are an adult.")
}else{
console.log("You are not an adult!")
}

Same Example of using Ternary Operator:

const age = 20;
const message = age >= 18 ? "You are an adult." : "You are not an adult!" 

console.log(message);
Table of Contents