DEV Community

Divyash Chhetri
Divyash Chhetri

Posted on • Originally published at graph.org

JavaScript ES6 Refresher (Part 1)

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')
    }
}
Enter fullscreen mode Exit fullscreen mode
  • person.walk doesn't call the function but only person.walk() does
const newWalk = person.walk
Enter fullscreen mode Exit fullscreen mode
  • 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]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode
  • 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
  }
Enter fullscreen mode Exit fullscreen mode
  • Arrow Functions
  const square = (number) => {
      return number * number
  }
Enter fullscreen mode Exit fullscreen mode
  const square = number => number * number
Enter fullscreen mode Exit fullscreen mode

The second one is more preferred

  • Arrow Functions Template
  const <function_name> = <parameters, ....> => {
      <code>
      <return statement>
  }
Enter fullscreen mode Exit fullscreen mode
  • A good use case of arrow function
  const jobs = [
      {id: 1, isActive: true},
      {id: 2, isActive: true},
      {id: 3, isActive: false}
  ]
Enter fullscreen mode Exit fullscreen mode

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?`;
Enter fullscreen mode Exit fullscreen mode

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


Top comments (0)