When learning and practicing with JavaScript, you are probably familiar with at least one of the three methods all (), bind () and apply (). We may not use these methods very often, but they are quite common in any JavaScript interview.
In JavaScript, functions are objects. Objects can include properties and methods. For almost any function, we can get these three methods.
But before we get started, let’s look at the following examples: When executing a function, this will be determined by the way a function is called (runtime binding).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | const person = { firstName: 'Sanjeev', lastName: 'Sharma', age: 22, getIntro: function() { console.log(`${this.firstName} ${this.lastName} is ${this.age} years old.`); } } person.getIntro(); // "Sanjeev Sharma is 22 years old." function randomFunc() { console.log(this); } randomFunc(); // window object |
- In a method: mention the owner object.
- In a function (sloppy mode): refers to the global object.
- In a function (strict mode): undefined.
Now let’s get started …
call ()
To the definition of:
The call () method calls a function with an existing value and the arguments are given individually. In a nutshell, deciding what is going to be that – in the function when we call it.
Let’s see a basic example to understand this problem.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function personIntro() { console.log(`${this.firstName} ${this.lastName}`); }; const person1 = { firstName: 'Sanjeev', lastName: 'Sharma' }; personIntro(); // Output 1: undefined undefined personIntro.call(person1); // Output 2: Sanjeev Sharma personIntro.call({ firstName : 'Harry', lastName : 'Potter' }); // Output 3: Harry Potter |
We have a function personIntro () trying to access the console of firstName and lastName. We have three outputs as follows:
- If the call () method is not used, then this method will refer to the window object by default. The Window object will not have any properties of firstName or lastName. Therefore, the result is undefined and undefined.
- If using call () and passing an object with properties is required, this is person . Therefore, the result will be Sanjeev Sharma .
- Like the outputs above, just a further description of how call () works.
It is also possible to pass additional arguments in call () like so:
1 2 3 4 5 6 7 8 9 10 11 | function personIntro(city, state) { console.log(`${this.name} is from ${city}, ${state}`); }; const person = { name: 'Max', age: 26 } personIntro.call(person, 'Los Angeles', 'California'); // Output: Max is from Los Angeles, California |
bind ()
To the definition of:
The bind () method creates a new function, and when called, its keyword is set to a given value, with a given string of arguments given any arguments passed when the function is called. called.
Sorry, too much information to process at once, so if you already understand call (), use that knowledge to understand bind ().
1 2 3 4 5 6 7 8 9 10 11 | function getPerson(person) { console.log(`${ person } is from ${ this.state }.`); } getPerson.call({ state : 'California' }, 'Max'); // Output 1: Max is from California. const personFromCalifornia = getPerson.bind({ state : 'California' }); personFromCalifornia('Max'); // Output 2: Max is from California. personFromCalifornia('Ben'); // Output 3: Ben is from California. |
We create a function getPerson () again. Now there are two outputs:
- Use call () and pass {state: ‘California’} (first argument) as arguments. The second argument will be person .
- Trying to output will be the same as when using bind (). With the use of bind (), we can associate this value with one function and get another function in return. In the above case, we associate it with {state: ‘California’} and store the returned function in personFromCalifornia . Now when calling personFromCalifornia , just pass the argument to person . It will have a value like this.
Just call back a function similar to another argument person .
So what’s the difference between call () and bind () here?
- the call () gets immediately invoked while bind () returns a function that can be invoked later.
- call () takes additional argument but bind () doesn’t.
- call () does not make a copy of the function, unlike bind ().
apply ()
To the definition of:
The apply () method calls a function with the given value, and the argument has been provided as an array (or an array-like object).
Basically exactly the same as call (), with only one small difference.
1 2 3 4 5 6 7 | function sum(num1, num2) { console.log(this + num1 + num2); } sum.call(2, 3, 4); // Output: 9 sum.apply(2, [3, 4]); // Output: 9 |
call () takes an individual argument, but apply () takes it as an array. That’s it.