AI Workshop: learn to build apps with AI →
Objects: apply, call, bind

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


Suppose you have an object:

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

and you want to add a method to it:

You could do it like this:

car.drive = function() {
  console.log(`Driving a ${this.maker} ${this.model} car!`)
}

and that works.

But suppose you want to have a function access the object properties:

const drive = function() {
  console.log(`Driving a ${this.maker} ${this.model} car!`)
}

drive()
//Driving a undefined undefined car!

You can’t, because if you try to use this, it does not point to the object, as the function is defined outside of it.

JavaScript offers the bind() method to bind this to any object you want, in this case the car object, and it works like this:

const drive = function() {
  console.log(`Driving a ${this.maker} ${this.model} car!`)
}.bind(car)

drive()
//Driving a Ford Fiesta car!

You could also use bind() on an existing object method to remap the value this points to:

const car = {
  maker: 'Ford',
  model: 'Fiesta',

  drive() {
    console.log(`Driving a ${this.maker} ${this.model} car!`)
  }
}

const anotherCar = {
  maker: 'Audi',
  model: 'A4'
}

car.drive.bind(anotherCar)()
//Driving a Audi A4 car!

You can perform the same operation, but instead of doing so at the function definition time, you do it at the function invocation step, using call() or apply():

const car = {
  maker: 'Ford',
  model: 'Fiesta'
}

const drive = function(kmh) {
  console.log(`Driving a ${this.maker} ${this.model} car at ${kmh} km/h!`)
}

drive.call(car, 100)
//Driving a Ford Fiesta car at 100 km/h!

drive.apply(car, [100])
//Driving a Ford Fiesta car at 100 km/h!

The first parameter you pass to call() or apply() is always bound to this.

The difference between call() and apply() is that apply() expects an array of arguments, while call() accepts a variable number of arguments passed directly.

Lessons in this unit:

0: Introduction
1: How to create an object
2: Object properties
3: Objects are passed by reference
4: Methods
5: Passing objects as function arguments or returning objects from a function
6: Accessing a property of the object inside a method using `this`
7: Object destructuring
8: Cloning objects
9: Sort an array of objects by a property value
10: Merging two objects into one
11: ▶︎ apply, call, bind