JavaScript ES6 Refresher (Part 1)

ES6 Refresher for Learning React

let, const, var

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:

1. person.talk()

2. 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)
  

  or
  

  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 ${}