ES6 Refresher for Learning React

Array Mapping

The map() method creates an array by calling a specific function on each element present in the parent array.

const colors = ["red", "blue", "green"];
const mappedArray = colors.map(color => 'Primary Color - ${color}');

Where, mappedArray = ['Primary Color - red', 'Primary Color - blue', 'Primary Color - green']

We use arrow functions to map each color into a new array using template string. The above code can be written without using template string and arrow function too.

const mappedArray = colors.map(function(color) {
    return "Primary Color - " + color;
})

The color parameter we pass to both functions are the specific single items of the array. We can give any variable name to it. eg. i in place of color

Object Destructuring

The conventional way of accessing values in the object

const address = {
    street: '1 ABC'
    city: 'DEF',
    country: 'GHI'
}

const street = address.street
const city = address.city
const country = address.country

The street, city, country will have values like "1 ABC", "DEF", "GHI"

But using the ES6 method of destructuring an object

 const {street, city, country} = address

In both cases we extracted the street, city and country property in new variables from the address object

const {street: st} = address

Here we are extracting street property from address and storing in it st variable.

So, st also contains "1 ABC" value extracted from street propperty of address object

Spread Operator

Spread operator allows an array to be expanded. It comes to best use when we need to concat a array, few new values, followed by another array.

const first = [1, 2, 3]
const second = [4, 5, 6]

const combined = first.concat(second)
const spreadCombined = [...first, ...second]

// best use case
const inBetween = [0, ...first, 10, 20, ...second, 30, 40]

Spread operator can also be used with objects

const one = {B: "Bhutan"}
const two = {D: "India"}

const combined = {A: "USA", ...one, C: "Canada", ...two, E: "Australia"}

Classes

Rather than creating several objects, we can use class

const person1 = {
    name: "ABC"
    walk() {
        console.log('Walk')
    }
}


const person2 = {
    name: "DEF"
    walk() {
        console.log('Walk')
    }
}

Having a class with common property is better than declaring several objects.

We can implement a class in JavaScript in the following way:

class Person {
    constructor(name) {
        this.name = name
    }
    walk() {
        console.log('Walk')
    }
}


//creating persons
const person1 = new Person('ABC')
person1.walk()
const person2 = new Person('DEF')
person2.walk()

Inheritance

Say, we create a Teacher class where all teachers should be able to walk. Therefore we inherit all the methods from the Person class using the extends keyword.

Now after the Teacher class inherits the properties of the Person class by using the extend class, we can use all the methods of the Person class by creating a Teacher instance of that class.

class Person {
    constructor(name) {
        this.name = name
    }
    walk() {
        console.log('Walk')
    }
}


class Teacher extends Person {
    teach() {
        console.log('Teach')
    }
}


const teacher1 = new Teacher('ABC ')
teacher1.teach()
teacher1.walk()

Now if we create a constructor of the Teacher class, we need to use the super keyword too.

class Teacher extends Person {
    constructor(name, degree) {
        super(name)
        this.degree = degree
    }    

    teach() {
        console.log('Teach')
    }
}

Using the super keyword, the name in the Teacher class is inherited from the Person class.

Modules

Modules are used to import a class or function from another JavaScript file.

export keyword needs to be added to the class or function that is going to be imported in a new JavaScript file.

src/Person.js

export class Person {
    constructor(name) {
        this.name = name
    }
    walk() {
        console.log('Walk')
    }
}


export function display(number) {
    console.log(number)
}

Importing Person class and display function in a new JavaScript file using Modules

src/teacher.js

import {Person} from './person.js'
import {display} from './person.js'

class Teacher extends Person {
    constructor(name, degree) {
        super(name)
        this.degree = degree
    }    

    teach() {
        console.log('Teach')
    }
}

const teacher1 = new Teacher('ABC ')
teacher1.teach()
teacher1.walk()

display('hello')

Usage:

import {function / class name} from 'path to that js file'

Note: export keyword needs to be added before the function or class

Default and Named export

• If we add a a default keyword alongside export keyword before a class or a function, it is known as default export

• Default exports are imported like this:

import ... from 'path to js file'

• And Named export are imported like this:

import { ... } from 'path to js file'

In the above example if we add default to

export class Person → export default class person

then, while importing it in a new file:

import Person , { promote } from './person.js'