33 JavaScript Concepts — #15. call, apply, bind

Sometimes we want to change the value that javascript’s this keyword is pointing to since the this is not always pointing to what we want. So Javascript provides a few methods so that we can explicitly choose what this is pointing. Let’s dive into the call, apply and bind 🤔

Index
1) call
  - definition
  - syntax
  - example
2) apply
  - definition
  - syntax
  - call vs apply
  - example
3) bind
  - definition
  - syntax
  - bind vs call, apply
  - example
4) Conclusion

call

definition

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

syntax

functionName.call(thisArg, arg1, arg2, …, argN)

example

Let’s imagine there’s a class named Person that creates object related to the person and you want to add additional information like age and job into steve without changing Person class. In this case, the call() method can be really useful.

First, I made the addAgeAndJob function which takes two parameters(age, job) and assign them into object(this keyword is pointing to)'sage and job property respectively.

Note that if we invoke addAgeAndJob without call() method, this keyword inside of theaddAgeAndJob function is pointing to Window object
( or undefined if we use strict mode)

However, if we invoke the addAgeAndJob using call() method, what this keyword is pointing to is replaced with the first parameter(steve) of the call() method and as you can guess, age and job parameters are the second and third parameter of call method respectively.

Therefore, age and job properties are added into steve as we intended since we invoked addAgeAndJob function and changed what this keyword is pointing to into steve by using call method.

apply

definition

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

syntax

functionName.apply(thisArg, [ argsArray])

call vs apply

The main difference between call and apply is just the way we pass the arguments. Let’s look at the second parameter of call and apply method. call takes one or more arguments. However, apply just take one argument as an array(or an array-like object)

example

Basically, the example is the same as the call() method’s example. There’s just two simple differences.

First, the call() method is changed into the apply() method.
Second, arguments are passed as an array([20, “front-end engineer”]) unlike the call() method’s arguments(20, “front-end engineer”)

That’s it! The apply method is really similar to the call method.

bind

definition

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

syntax

const boundFunc = functionName.bind(thisArg[, arg1[, arg2[, ...argN]]])

bind vs call, apply

Unlike call or apply methods, since the bind method creates a new function, we can assign it into a new function and call it whenever we want.

example

In the code above, I made a function named bound using the bind method. Since I passed the argument steve at the first parameter of the bind method, the bound function’s this will be always pointing to the steve object. Therefore, the result is the same as other examples.

Conclusion

Today we learned about JavaScript’s a few different methods that change what this keyword is pointing to. If you want to invoke immediately, you can use call or apply methods. If you want to create a new function, then use the bind method.

Thanks for reading my story 😊

reference: MDN