What are the call(), apply() and bind() methods in JavaScript?

Call, apply, and bind are the functions that help you change the context of the this keyword present inside the invoking function. Using them you can tell JavaScript explicitly that what the this keyword should be or in which context we want pointthis value.

few basic rules that are worth remembering.

• this always refers to an object.
• this refers to an object which calls the function it contains.
• In the global context this refers to either window object or is undefined if the ‘strict mode’ is used.
• In an event, this refers to the element that received the event.
• In regular function call this is undefined (in strict mode).

Let's begin🚀

1. call()

With the call() method, you can write a method that can be used on different objects.

syntax 👇🏻

call(thisArgument) 
call(thisArgument, arg1) 
call(thisArgument, arg1, /* …, */ argN)

where,

thisArgument is the value to use as this when calling function and arg1, ..., argN are the Arguments for the function which is optional. Note that if you invoke a function without any thisArgument, then JavaScript considers this property to be a global object.

Example

In the Example Above when we call person.intro(), the value of this will be bound to object someObject, even when intro() is not a method of 'someObject'. this is happening because of the call method.

but without call() method it's giving undefined, remember those basic rules above?

we can also receive args in call(), this is how we pass args in call().

2. apply()

The apply() method is similar to the call() method but the main difference is that:

• the call() method takes arguments separately.
• the apply() method takes arguments as an array.

syntax 👇🏻

call(thisArgument) 
call(thisArgument, argsArray)

where,

thisArgument is the value to use as this when calling function and argsArray is an array-like object, specifying the arguments with which function should be called, or null or undefined if no arguments should be provided to the function.

Example

In the example above you can easily see the syntax difference between call() and apply().

in case of apply() we've to pass the args inside an array whereas for the call() method we've to pass the args separately. When we pass args without [] it's value will be undefined.

3. bind()

With the bind() method, an object can borrow a method from another object.

The bind() function creates a new bound function. Calling the bound function generally results in the execution of the function it wraps, which is also called the target function.

syntax 👇🏻

call(thisArgument) 
call(thisArgument, arg1) 
call(thisArgument, arg1, /* …, */ argN)

where,

thisArgument is the value that is passed as the this parameter to the target function when the bound function is called. If the function is not in strict mode, null and undefined will be replaced with the global object, and primitive values will be converted to objects.

The value is ignored if the bound function is constructed using the new operator.

Example

In the example above you can see that the someObject object is borrowing intro() method from 'person' because it doesn't have it's own intro() method.

person.intro.bind(someObject) returns a copy of intro() method and assigns it to someObject.

How can these methods be used to improve our code ?

When writing code, it can be helpful to make it as clear and concise as possible. The bind() and apply() methods can be used to do just that by returning a new function that will call the original function with the supplied this value and arguments.

This makes it explicit what this value should be within a given context, making the code easier to read.

Conclusion

I Hope you learned something about these important JavaScript methods.

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

Let's connect on Twitter and LinkedIn.

👋 Thanks for reading, See you next time.