JavaScript ES6 Refresher (Part 2)
Tags: javascript, es6, beginners, react
Published: 2022-02-16 03:05:44

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

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

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

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

```javascript
 const {street, city, country} = address
```

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

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

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

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

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

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

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

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

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

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

---