DEV Community: CJ

Understanding call(), apply() and bind() in JavaScript

CJ — Fri, 01 Jan 2021 22:25:31 +0000

In this tutorial, we will understand call, bind, and apply methods in JavaScript.

To understand these methods you should know "this" keyword in JavaScript, if you don't, read my article to understand about "this" keyword here:

The "this" keyword in JavaScript

CJ ・ Dec 26 '20

#javascript #webdev

Let's begin with why we need to know "this" keyword beforehand to understand call, bind, and apply methods

So now you must know that

Every function gets this property automatically
The context of this is the function it is being called from, i.e., before the dot. For e.g.,

'use strict'

let userA = {
 age: 9,
 getAge() {
  console.log(this.age)
 }
}
// here context of getAge is object userA
userA.getAge() // 9

// or

let userB = {
 age: 19
}

function getAge() {
  console.log(this.age)
}
// here context of getAge is object userB
userB.getAge = getAge

userB.getAge() // 19

But sometimes we lose our reference this
An example:

'use strict'

let car = {
  manufacturer: 'Mahindra',
  model: 'XUV500',
  featureArray: ['Sunroof', 'ABS', '4WD'],

  carInfo() {
    const info = `${this.manufacturer} ${this.model} have these features: `

    const features = this.featureArray.reduce(function (string, feature, i) {
      if (i === this.featureArray.length - 1) {
        return `${string} and ${feature}.`
      }
      return `${string} ${feature},`
    }, '')

    console.log(info + features)
  },
}

car.carInfo()

This will throw a TypeError: Cannot read property 'featureArray' of undefined

Which happens when code tries to access .featureArray of this which is on line 12

 if (i === this.featureArray.length - 1) {}

According to error this.featureArray is undefined.

Let's see why this happened:

'use strict'

let car = {
  manufacturer: 'Mahindra',
  model: 'XUV500',
  featureArray: ['Sunroof', 'ABS', '4WD'],

  carInfo() {
    const info = `${this.manufacturer} ${this.model} have these features: `

    //                👇here this is referenced to car object
    const features = this.featureArray.reduce(function (string, feature, i) {
      console.log(this) // undefined
      //        👇here reference of this is unknown
      if (i === this.featureArray.length - 1) {
        return `${string} and ${feature}.`
      }
      return `${string} ${feature},`
    }, '')

    console.log(info + features)
  },
}

car.carInfo()

The reference of this is unknown because the anonymous function we pass to .reduce does not get the context of user.

Let's solve this problem with a hack first, by saving the reference of this:

'use strict'

let car = {
  manufacturer: 'Mahindra',
  model: 'XUV500',
  featureArray: ['Sunroof', 'ABS', '4WD'],

  carInfo() {
    const info = `${this.manufacturer} ${this.model} have these features: `

    let savedReference = this

    const features = this.featureArray.reduce(function (string, feature, i) {
      if (i === savedReference.featureArray.length - 1) {
        return `${string} and ${feature}.`
      }
      return `${string} ${feature},`
    }, '')

    console.log(info + features)
  },
}

car.carInfo() // Mahindra XUV500 have these features:  Sunroof, ABS, and 4WD.

We will fix this by using `bind()` later in this article, before that

Let's learn about `bind()` method available in JavaScript

The bind() method creates a new function that, when called, has this keyword set to the provided value.

'use strict'

let kid = {
  Name: 'Rob',
  Age: 6,
}
function sayHi() {
  console.log('👋 Hello, I am ' + this.Name)
}

sayHi()

Here it will throw an error : TypeError: Cannot read property 'Name' of undefined
Because of sayHi() being called without any context, this has not referenced to anything here.

So let's fixed the context of this to sayHi() with bind()

'use strict'

let kid = {
  Name: 'Rob',
  Age: 6,
}
function sayHi() {
  console.log('👋 Hello, I am ' + this.Name)
}

let logHi = sayHi.bind(kid) // creates new object and binds kid. 'this' of sayHi = kid now

logHi() // 👋 Hello, I am Rob

So now we understand how `bind` works, let's solve the `car` problem with `bind` instead of the previous hack above

'use strict'

let car = {
  manufacturer: 'Mahindra',
  model: 'XUV500',
  featureArray: ['Sunroof', 'ABS', '4WD'],

  carInfo() {
    const info = `${this.manufacturer} ${this.model} have these features: `

    const features = this.featureArray.reduce(
      function (string, feature, i) {
        if (i === this.featureArray.length - 1) {
          return `${string} and ${feature}.`
        }
        return `${string} ${feature},`

        // 👇here we have bind the this object which is referenced to object car
      }.bind(this),
      ''
    )

    console.log(info + features)
  },
}

car.carInfo() //Mahindra XUV500 have these features:  Sunroof, ABS, and 4WD.

Now we have covered `bind()`, let's understand `call()` and `apply()`

What is a call method in JavaScript?

Every function has a method call that allows invoking the function specifying the context (this) and arguments the function will be invoked with

'use strict'

let kid = {
  Name: 'Rob',
  Age: 6,
}

function sayHi() {
  console.log('👋 Hello, I am ' + this.Name)
}

sayHi.call(kid) // 👋 Hello, I am Rob

We can pass arguments to it also :

'use strict'

let kid = {
  Name: 'Rob',
  Age: 6,
}

function sayHi(place, number) {
  console.log(`👋 Hello, I am ${this.Name}, I live in ${place} and I have ${number} dogs`)
}

sayHi.call(kid, 'Montreal', 2) // 👋 Hello, I am Rob, I live in Montreal and I have 2 dogs

Let's see how apply() works :

call() and apply() are exact same thing. The only difference between how they work is that call() expects all arguments to be passed in individually, whereas apply() expects an array of all of our arguments.

'use strict'

let kid = {
  Name: 'Rob',
  Age: 6,
}

function sayHi(place, number) {
  console.log(`👋 Hello, I am ${this.Name}, I live in ${place} and I have ${number} dogs`)
}

sayHi.apply(kid, ['Montreal', 2]) // 👋 Hello, I am Rob, I live in Montreal and I have 2 dogs

I hope this article was helpful for you to understand call(), bind(), and apply().

Feel free to give a suggestion or shoot me a message on Twitter or LinkedIn and while you are at it checkout my Website.
See you in the next post!👋

The "this" keyword in JavaScript

CJ — Sat, 26 Dec 2020 21:51:31 +0000

Let's understand this by mimicking a real-world example.

In the real world

We have things, objects, entities, etc (Kid, Car, User)
And these things act (Jump, Accelerate, decelerate, buy stuff, login)

In Javascript world

Let's assume kid as an Object 🧒

'use strict'
let kid = { Name: 'Rob', Age : 6}

And to teach this kid to say hello
Give this kid a method (action)

sayHi() 👋

'use strict'

let kid = { Name: 'Rob', Age : 6}

kid.sayHi() = function() {
  return '👋 Hello!'
}

kid.sayHi()  //👋 Hello!

Now change it so that the kid reply with its name also

'use strict'
let kid = { Name: 'Rob', Age : 6}

kid.sayHi() = function() {
  return '👋 Hello, I am ' + Name
}

kid.sayHi()  // this will return an reference error

Which is the same as :

'use strict'
let kid = { 
 Name: 'Rob',
 Age : 6,

 sayHi() {
  return '👋 Hello, I am ' + Name
 }
}
kid.sayHi()  // this will return an reference error

The reason it didn't return Name Rob
is because Name does not have access to the object kid

To solve this we will add this

'use strict'
let kid = { 
 Name: 'Rob',
 Age : 6,

 sayHi() {
  return '👋 Hello, I am ' + this.Name
 }
}
kid.sayHi()  // 👋 Hello, I am Rob

Here the value of Name is taken from the object it is being called i.e., kid

The value of this is evaluated at call-time and does not depend on where the method was declared, but rather on what object is being called from i.e, before the dot.

To further understand this let us create a method outside of the kid object

'use strict'

function myAge() {
  return 'I am ' + this.Age + ' years old'
}

let parent = {
 Name: 'Alex',
 Age : 32
}

let kid = { 
 Name: 'Rob',
 Age : 6,

 sayHi() {
  return '👋 Hello, I am ' + this.Name
 }
}

kid.sayHi()  // 👋 Hello, I am Rob

kid.tellAge = myAge
console.log(kid.tellAge()) // I am 6 years old

parent.tellAge = myAge
console.log(parent.tellAge()) // I am 32 years old

Now let us understand how chaining methods work with an example of a car;🚗

...
There's a car which is stationary and with every acceleration and deceleration, it moves 1 meter forward and backward respectively.

'use strict'

let car = {
  distanceTraveled: 0,

  accelerate() {
    this.distanceTraveled++
  },

  declerate() {
    this.distanceTraveled--
  },

  showDistance: function() { 
    // shows the current distance traveled
    console.log( this.distanceTraveled )
  }
}

car.accelerate().declerate().accelerate().showDistance() 
// this will return an error "Cannot read property declerate' of undefined"

Remember the value of this is evaluated during run-time, so
after the first acceleration, distanceTraveled value becomes 1 but when the code calls the next method decelerate it does not get the object car due to which it returns typeError ❌

To fix this, we just have to return the object after calling a method like this:

'use strict'

let car = {
  distanceTraveled: 0,

  accelerate() {
    this.distanceTraveled++
    return this
  },

  declerate() {
    this.distanceTraveled--
    return this
  },

  showDistance: function() { 
    // shows the current distance traveled
    console.log( this.distanceTraveled )
  }
}

car.accelerate().declerate().accelerate().accelerate().showDistance() // 2

I hope this article was helpful.
Feel free to give a suggestion or shoot me a message on Twitter or LinkedIn.
See you in the next post!👋

DEV Community: CJ

Understanding call(), apply() and bind() in JavaScript

The "this" keyword in JavaScript

CJ ・ Dec 26 '20

This will throw a TypeError: Cannot read property 'featureArray' of undefined

We will fix this by using bind() later in this article, before that

Let's learn about bind() method available in JavaScript

So now we understand how bind works, let's solve the car problem with bind instead of the previous hack above

Now we have covered bind(), let's understand call() and apply()

What is a call method in JavaScript?

The "this" keyword in JavaScript

In the real world

In Javascript world

We will fix this by using `bind()` later in this article, before that

Let's learn about `bind()` method available in JavaScript

So now we understand how `bind` works, let's solve the `car` problem with `bind` instead of the previous hack above

Now we have covered `bind()`, let's understand `call()` and `apply()`