DEV Community: Divyash Chhetri

JavaScript ES6 Refresher (Part 2)

Divyash Chhetri — Wed, 16 Feb 2022 03:05:44 +0000

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'

JavaScript ES6 Refresher (Part 1)

Divyash Chhetri — Wed, 16 Feb 2022 02:55:32 +0000

ES6 Refresher for Learning React

let, const, var

	let	const	var
scope	block	block	function
re-assignable	yes	no	yes
re-declarable	no	no	yes

objects

In the object below, walk and talk are known as methods and can be declared in two ways
Both walk and talk are the same but its declaration is different

const person = {

    name: "Dork",
    walk: function () {
        console.log('Walk')
    }
    talk() {
        console.log('Talk')
    }
}

person.walk doesn't call the function but only person.walk() does

const newWalk = person.walk

here we are getting a reference of walk and newWalk also becomes a method

console.log(walk) → logs the function in console

console.log(walk) → calls the function

to access the items in an object, we use these:

person.talk()
person["name"]

We use second method only if we are getting keys from else where (eg. getting name key from user through some forms)

  const keyName = 'name'
  person[keyName.value]

this

this keyword points to the particular object or gives a reference to that particular object
calling a function with this keyword outside the object as a standalone function, returns a global object
the global object is also known as the window object
every function in javascript is an object
using the bind keyword points this keyword to a particular object

const newWalk = person.walk.bind(person)

now the newWalk function points to the person object with name Dork while logging it in the console
console.log(newWalk()) → logs the person object in the console

arrow function

Normal Functions

  const square = function(number) {
      return number * number
  }

Arrow Functions

  const square = (number) => {
      return number * number
  }

  const square = number => number * number

The second one is more preferred

Arrow Functions Template

  const <function_name> = <parameters, ....> => {
      <code>
      <return statement>
  }

A good use case of arrow function

  const jobs = [
      {id: 1, isActive: true},
      {id: 2, isActive: true},
      {id: 3, isActive: false}
  ]

Here the jobs with true values of isActive is filtered and stored in ActiveJobs variable

The parameters passed to the functions are jobs and jobs with true jobs.isActive is returned by the functions

normal functions

const ActiveJobs = jobs.filter(function(job) {return job.isActive})

using arrow functions

const ActiveJobs = jobs.filter(job => job.isActive)

const ActiveJobs = jobs.filter((jobs) => {return jobs.isActive})

Template String

Rather than using + to concatenate strings, template strings can do the job in a better way

const name = "Dork"
const message = "Hello " + name + "! How are you?"

// rather we can use template string
const templateStringMessage = `Hello ${name}! How are you?`;

For template strings we use ` (back ticks) rather than " (quotation marks) and the variable are placed inside ${}