Call and Apply Methods : JavaScript

As definition from MDN goes,

The call() method calls a function with a given 'this' value and arguments provided individually.

Lets understand by an example: Consider Ramesh runs an logistics company. He names his buses with a brand name SPACINGS . Now, lets create a spacings object with book function.

call()

const spacings = {
  busName : 'Spacings',
  busCode : 'SP',
  bookings : [],
  book(busNum, name){
    console.log(`${name} booked a seat on ${this.busName} having bus number ${busNum}.`)
    this.bookings.push({bus:`${this.busCode}${busNum}`,name})
    }
}

Its time use the book function to book for a trip.

spacings.book(24, 'Ramesh')
console.log(spacings)

the output will be

Ramesh booked a seat on Spacings having bus number 24. //part of spacings.book(24,'Ramesh')
{
  busName : 'Spacings',
  busCode : 'SP',
  bookings : [ { bus: 'SP24', name: 'Ramesh' } ],
  book : [Function: book]
}

Ramesh is happy with his business. But now his friend 'Suresh' suggests him to expand his business by creating another brand. Ramesh feels that this is a good idea, and then Ramesh creates another brand RACINGS .

const racings = {
  busName : 'Racings',
  busCode : 'RC',
  bookings : [],
}

To take bookings for racings, we need to define a function. As an engineer, lets follow 'DRY' (Don't repeat yourself) principle. Lets reuse the same function created in Spacings object. call() takes first argument as where we want it to refer, in our case its 'racings', and rest arguments will be function arguments (12, 'Suresh').

const book = spacings.book;
book.call(racings, 12, 'Suresh')
console.log(racings)

and the output will be

Suresh booked a seat on Racings having bus number 12.
{
  busName: 'Racings',
  busCode: 'RC',
  bookings: [ { bus: 'RC12', name: 'Suresh' } ]
}

we have successfully reused same function, that's great !

Lets understand, what happens if we don't use call() and instead do

const book = spacings.book;
book(12, 'Suresh')

here is the output

Suresh booked a seat on undefined having bus number 12.
TypeError: Cannot read property 'push' of undefined
    at book (/home/runner/call-apply/index.js:7:19)

it is due to the 'this' keyword, which is now pointing to window/global object. But by using call() we can say that we want to book for racings object explicitly.

apply()

The apply() method calls a function with a given 'this' value, and arguments provided as an array (or an array-like object).

the only difference between call and apply is that apply takes arguments as an array.

const book = spacings.book;
let details = [55, 'Shamesh']
book.apply(racings, details)
console.log(racings)

and the output will be

Shamesh booked a seat on Racings having bus number 55.
{
  busName: 'Racings',
  busCode: 'RC',
  bookings: [ { bus: 'RC55', name: 'Shamesh' } ]
}

That's all 😎 about call() and apply() methods. Feel free to run the example using your favorite editor and understand better.

Pavan S P

Pavan S P

Call and Apply Methods : JavaScript

call()

apply()