DEV Community

Divyash Chhetri
Divyash Chhetri

Posted on • Originally published at graph.org

5 1

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


Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay