The keyword 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. this Let's discuss this keyword with simple and easy-to-understand examples before actually delving into the , , and methods as keyword is the main reason for having those methods. this call apply bind this What is this in JavaScript? The keyword in JavaScript refers to the object that the function is a property of and will depend on the object that is invoking the function. this this To get a quick idea of have a look at the code snippet below. this const myObj = {
  name: 'John',
  age: 25,
  place: 'London',
  myFunction: function() {
    return this;
  }
};

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

myFunction(); // window or undefined(in case of 'strict mode') In the above code we are returning from the , so when is called what we see or get is the value of . this myFunction myFunction this Again if we recollect our definition of , it refers to the object which the function is a property of. Here our function is a property of global object nothing but the object in the browser, so which means when we call the value of is going to be the object. this myFunction window myFunction this window If we go by our trick of .(dot) preceding the function, here there's no dot but every function is a method in the object, so it translates to so here, the keyword refers to the object. window window.myFunction() this window In order to avoid functions getting attached to the window object, we mode so as a result window will be in such cases. use strict undefined So keep in mind our definition as we're going to use that for understanding , and methods. call apply bind 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. Understanding call, apply, bind in JavaScript Let's consider an object with a property and a method . person name details 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 When we call the method on object with the arguments, we knew that refers to the object because is a property of the object and so would be and so the result that gets returned will be as shown in the comments. details person this person details person this.name John This part is going to be clear as we knew what means in the object. this person Let's consider a scenario where we wanted to use the method but with different arguments. details As per the method we can pass in different age and place values but how about the name, as it is connected with the keyword? This is where we are going to use those special methods , and . Let's dive into those. details this call apply bind Using Method call Now we want to associate a different object other than to keyword of method. So to do that we're going to use the method as shown below in the code snippet. person this details call person.details.call({ name: 'James'}, 30, 'Tokyo'); 
// James 30 years old, lives in Tokyo A method takes a new object that we want this to refer to followed by the arguments to the function(nothing but the method) and it gets called referencing to the new object passed as the first argument. Voila! That's what a call method is. call details this Using Method apply Guess what, method is just the same as the method, that is, it takes a new object as the first argument to reference the keyword and is followed by an array of arguments. So it means you can simply pass the arguments to the function in the form of an array instead of passing individually. Have a look at the code below so it becomes clear for you. apply call this details person.details.apply({ name: 'James'}, [30, 'Tokyo']); 
// James 30 years old, lives in Tokyo So and methods are used to reference a new object to keyword on methods. call apply this And then what is for? Guess! bind Using Method bind When and 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 method is used. Have a look at the code snippet below to get more clarity. call apply bind const personDetails = person.details.bind({name: 'William'}, 40, 'Rome');

personDetails(); 
// William 40 years old, lives in Rome So using the method returns a new function reference which can be called at a later time and that is all about the bind method. bind So putting all the three methods together. 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 So in short CAB(call, apply, bind in JavaScript) are used to reference a new owner object to the keyword. Hope this article has demystified the call, apply and bind methods in JS. this Did we miss anything here? Yes, the value will be different when we use an arrow function. See you in the next article. this If you liked this article please give a follow & share. More such interesting articles are on the way. First Published here

Different

Keep

Mind

Chrome Extension Productivity Hack: Copy Text with a Mouse Hover and Click

Read My Stories

Find the awesome web dev stuff

Too Long; Didn't Read

Make resilience your competitive advantage

A Quick Guide to CAB(Call, Apply, Bind) in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Convert Selected Text to an Image With this Chrome Extentsion

Creating Callable Objects in JavaScript

The Binding Concept in Javascript

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

Convert Selected Text to an Image With this Chrome Extentsion

Creating Callable Objects in JavaScript

The Binding Concept in Javascript

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps