The keyword <code>this</code> in JavaScript is one of the most muddling concepts because its value depends on where it is used. Often it tricks developers and sometimes it's the culprit behind surreal results.
Let's discuss this <code>this</code> keyword with simple and easy to understand examples before actually delving into the <code>call</code>, <code>apply</code>, and <code>bind</code> methods as <code>this</code> keyword is the main reason for having those methods.
<h2>What is <code>this</code> in JavaScript?</h2>
The <code>this</code> keyword in JavaScript refers to the object that the function is a property of and <code>this</code> will depend on the object that is invoking the function.&nbsp;
To get a quick idea of <code>this</code> have a look at the code snippet below.
<pre class="language-javascript"><code>const myObj = {
 name: 'John',
 age: 25,
 place: 'London',
 myFunction: function() {
 return this;
 }
};

myObj.myFunction(); 
// {name: "John", age: 25, place: "London", myFunction: &fnof;()}</code></pre>
In the above code snippet, you can see that when <code>myFunction</code> method is called it returns the value of <code>this</code>, which is nothing but the <code>myObj</code> itself. If you recollect the definition for <code>this</code> in the previous paragraph, it says <code>this</code> refers to the object that the function is a property of, so here <code>myFunction</code> is a property of <code>myObj</code>, which means <code>this</code> is referring to that <code>myObj</code> object.&nbsp;
A simple trick is whatever precedes before .(dot) is the object referenced by the <code>this</code> keyword. So before .(dot) in <code>myObj.myFunction()</code> is <code>myObj</code>, which is the value of <code>this</code>.
Let's take another example to understand this.
<pre class="language-javascript"><code>function myFunction() {
 return this;
}

myFunction(); // window or undefined(in case of 'strict mode')</code></pre>
In the above code we are returning <code>this</code> from the <code>myFunction</code>, so when <code>myFunction</code> is called what we see or get is the value of <code>this</code>.
Again if we recollect our definition of <code>this</code>, it refers to the object which the function is a property of. Here our function <code>myFunction</code> is a property of global object nothing but the <code>window</code> object in the browser, so which means when we call <code>myFunction</code> the value of <code>this</code> is going to be the <code>window</code> object.&nbsp;
If we go by our trick of .(dot) preceding the function, here there's no dot but every function is a method in the <code>window</code> object, so it translates to <code>window.myFunction()</code> so here, the <code>this</code> keyword refers to the <code>window</code> object.&nbsp;
In order to avoid functions getting attached to the window object, we <code>use strict</code> mode so as a result window will be <code>undefined</code> in such cases.&nbsp;
So keep in mind our definition as we're going to use that for understanding <code>call</code>, <code>apply</code> and <code>bind</code> methods.&nbsp;
<blockquote>
The this keyword in JavaScript refers to the object that the function is a property of and this will depend on the object that is invoking the function.&nbsp;
</blockquote>
<h2>Understanding call, apply, bind in JavaScript</h2>
Let's consider an object <code>person</code> with a property <code>name</code> and a method <code>details</code>.
<pre class="language-javascript"><code>const person = {
 name: 'John',
 details: function(age, place) {
 return `${this.name} ${age} years old, lives in ${place}`
 }
}

person.details(25, 'London'); //John 25 years old, lives in London</code></pre>
When we call the method <code>details</code> on <code>person</code> object with the arguments, we knew that <code>this</code> refers to the <code>person</code> object because <code>details</code> is a property of the <code>person</code> object and so <code>this.name</code> would be John and so the result that gets returned will be as shown in the comments.
This part is going to be clear as we knew what <code>this</code> means in the <code>person</code> object.
Let's consider a scenario where we wanted to use the <code>details</code> method but with different arguments.
As per the <code>details</code> method we can pass in different age and place values but how about the name, as it is connected with the <code>this</code> keyword? This is where we are going to use those special methods <code>call</code>, <code>apply</code> and <code>bind</code>. Let's dive into those.
<h3>Using <code>call</code> method</h3>
Now we want to associate a different object other than <code>person</code> to <code>this</code> keyword of <code>details</code> method. So to do that we're going to use the <code>call</code> method as shown below in the code snippet.
<pre class="language-javascript"><code>person.details.call({ name: 'James'}, 30, 'Tokyo'); 
// James 30 years old, lives in Tokyo</code></pre>
A <code>call</code> method takes a new object that we want this to refer to followed by the arguments to the function(nothing but the <code>details</code> method) and it gets called referencing <code>this</code> to the new object passed as the first argument. Voila! That's what a call method is.&nbsp;
<h3>Using <code>apply</code> method</h3>
Guess what, <code>apply</code> method is just the same as the <code>call</code> method, that is, it takes a new object as the first argument to reference the <code>this</code> keyword and is followed by an array of arguments. So it means you can simply pass the arguments to the <code>details</code> function in the form of an array instead of passing individually. Have a look at the code below so it becomes clear for you.
<pre class="language-javascript"><code>person.details.apply({ name: 'James'}, [30, 'Tokyo']); 
// James 30 years old, lives in Tokyo</code></pre>
So <code>call</code> and <code>apply</code> methods are used to reference a new object to <code>this</code> keyword on methods.
And then what <code>bind</code> is for? Guess!
<h3>Using <code>bind</code> method</h3>
When <code>call</code> and <code>apply</code> methods are applied they are called(invoked) directly referencing the new object passed but in order to get a new function reference that can be used to call at later times, the <code>bind</code> method is used. Have a look at the code snippet below to get more clarity.
<pre class="language-javascript"><code>const personDetails = person.details.bind({name: 'William'}, 40, 'Rome');

personDetails(); 
// William 40 years old, lives in Rome</code></pre>
So using the <code>bind</code> method returns a new function reference which can be called at a later time and that is all about the bind method.
So putting all the three methods together.
<pre class="language-javascript"><code>const person = {
 name: 'John',
 details: function(age, place) {
 return `${this.name} ${age} years old, lives in ${place}`
 }
}

person.details(25, 'London'); //John 25 years old, lives in London

// Using call
person.details.call({ name: 'James'}, 30, 'Tokyo'); // James 30 years old, lives in Tokyo

// Using apply
person.details.apply({ name: 'James'}, [30, 'Tokyo']); // James 30 years old, lives in Tokyo

// Using bind
const personDetails = person.details.bind({name: 'William'}, 40, 'Rome');
personDetails(); // William 40 years old, lives in Rome</code></pre>
So in short CAB(call, apply, bind in JavaScript) are used to reference a new owner object to the <code>this</code> keyword. Hope this article has demystified the call, apply and bind methods in JS.
Did we miss anything here? Yes, the <code>this</code> value will be different when we use an arrow function. See you in the next article.

Call, apply, bind in JavaScript are some of the most often confusing methods. Let's demystify these with simple examples.

Posts tagged with This

Demystifying call, apply, bind in JavaScript