call, apply and bind in JavaScript

Understanding JavaScript();

We have heard these terms a lot while working on some projects

but as developers, we just use the concept and think of reading it later in deep, yes I have a long list 😁

now, this is the time to read it in deep (the long story is crafted shortly, give it a read) 😅

Story Covers:

• What is the call(), apply() and bind() methods and how do they work?

before going through all this we need a clear idea of this keyword in javascript.

What is the “this” keyword in javascript?

• in JavaScript, this keyword refers to an object.
• it refers to an object that is executing the current function/piece of code
• if the referenced function is a regular function “this” refers to the global scope (this sounds a bit tricky right? explained below)

console.log in line 4 refers to myName in line 3 (local scope)
console.log in line 5 refers to myName in line 1 (global scope)

• if the referenced function is a method inside an object “this” refers to that particular object (explained below)

this.userName refers to the userName key in the object userInfo

Note: this is not a variable. It is a keyword. You cannot change the value of this.

Call, Apply, and Bind are three important JavaScript methods that are available to all JavaScript functions.

Call( )

• The call is a predefined javascript method, which is used to call a method.
• The call method is used to call(invoke) a method with an owner object as a first argument, also we can pass other args to call depending on the function requirement that is being invoked.
• it can be used to call a method that belongs to another object.

object.objectMethod.call(ownerObject, argument1, argument2, ...)
or
objectMethod.call(ownerObject, argument1, argument2, ...)
//passing args are optional, depending on your function requirement

• user.printFullName.call(user);
  - user is an owner object by which the printFullName function will be called.
  - when the function executes, this.firstName refers to ownerObject.firstName (in this case its user.firstName i.e. “Joie”)
  - user.printFullName.call(user2), in this case it will be user2.firstName i.e. “Jon”.
• generally, we don’t use a function like this in the real world, we extract the function out of the object.

• passing the extra parameters to it.

this is how I call it
call printFullName(function) with owner object(instance) user and pass other params to it
this makes it easy to understand (at least for me :D)

wondering what if I have a lot of parameters to pass, this doesn’t looks like a good way to do it right?

here comes apply in the picture, when you want to pass an array instead of an argument list, apply() is the handy method.

Apply( )

• using apply(), you can write a method that can be called by other objects.
• this is similar to call().
• the only difference between call() and apply() is, that the call takes a list of arguments and apply accepts an array as an argument.

object.objectMethod.apply(ownerObject, [argument1, argument2, ...])
or
objectMethod.apply(ownerObject, [argument1, argument2, ...])
//passing args are optional, depending on your function requirement

here the arguments are passed as an array and that is individually accepted by method printFullName().

Bind( )

• bind() works the same but is slightly different from call() and apply().
• as the name suggests it binds a function to an object.
• bind() returns a function that can be executed later at any point in time.
• using bind() you can borrow a function from another object and use it later with any other object.
• this is also known as function borrowing in js.

in the above example, we have borrowed the fullName function from the user1 object.
- let fullName = user1.fullName.bind(user2); will return a function that can be invoked later.
- the returned function is called with the user2 object (owner object), whenever this fullName() will be executed it will refer to the first and last name in the user2 object, as it was called with the user2 object.

we will see how we can create our own bind method polyfill, give it a read here. 😎