The " keyword in JavaScript can be confusing. Let’s demystify it ! this" In , the keyword has the same use as when we use it in a plain sentence : it refers to something that we already introduced earlier. JavaScript this If I say : , you immediately understand that “this guy” refers to Gary Vaynerchuck. “I met Gary Vaynerchuck yesterday at a web convention. This guy is amazing.” In a similar way, when used in JavaScript, refers to an object, and more specifically to the object that invokes the code. this Consider this example: → Try it yourself We created a object with properties and a method. The method uses the keyword to refer to the object. customer greetCustomer this customer Note that is able to access the properties of the object ( and ). It is because : it can therefore access the methods and properties of the object. this firstName lastName not only **this** to the refers **customer** object , but it also the value of the object contains When the method is invoked, inside the method automatically refers to the object that invoked the method : the object . But before the method was called, and this is very important to grasp, . greetCustomer this customer _this_ was not assigned a value What does it mean ? Take this function for example: var sayCatName = function(catName){console.log("My cat's name is " + catName);}; What is it going to print ? Well, for the moment, not much, we have the function but we don’t know the value of until we the function and pass it a cat's name : defined catName invoke sayCatName('Alphonse'); // Prints "My cat's name is Alphonse" And that’s the exact same idea behind the keyword : we won't know what it refers to until an object invokes a function where is defined. In other words, the keyword is not assigned a value until a function where it is defined is actually called. this this this So . Not where it is defined, but where it is called. whenever you are trying to figure out what the **this** keyword refers to, ask yourself the question: "Where is this function invoked ?" Whenever you are trying to figure out what the keyword refers to, ask yourself the question: . Not where it is defined, but where it is called. this "Where is this function invoked ?" This was a basic example, and there will be times when it will be more difficult to determine what refers to in our code. Let's now dive into the four rules that will allow us to do so : this (When is inside of a declared object) Implicit Binding this (When we explicitly set the value of using , or ) Explicit Binding this call apply bind (When is outside of a declared object) The global context this (When creating a new object) The **new** keyword 1. Implicit Binding (When is inside a declared object) this When the keyword is found inside of a declared object, the value of will always be the closest parent object. this this Consider our customer object with a new method : whatIsMyObject → Try it yourself We find the keyword first Inside of the function . The closest parent object is the object, which means that the value of the is the object. this greetCustomer customer this customer When we print alone inside the function , whose closest parent is also the object, we get the whole object printed in the console, so we are now sure that the value of is the object. this whatIsMyObject customer this customer This is all well, but what happens when we have a nested object ? A nested object → Try it yourself We added a key to the object called . The value of is another object. Inside this object, we have an function that uses to call the customer by his name. customer address address askAddress this However, seems to be unable to access the property of the object and prints . Have you guessed why ? this name customer "Dear undefined, please enter your address" Well let’s go back to our rule that says that the value of will always be the closest parent object : here we are in the object, but also inside the nested object, which is in fact the closest parent to when it it inside the function . this customer address this askAdress Since the object has no property , is undefined. We can also see that the function inside the object doesn't refer to anymore but to . address firstName this.firstName whatIsMyObject address customer address So how can we fix this ? What if we need our method to return the name of the customer ? We will need to explicitely change the value of with the , or methods. askAddress this call apply bind 2. Explicit Binding (When we explicitly set the value of using , or ) this call apply bind Functions in JavaScript are objects, and as objects they have several methods. We use the , and methods of a function when we want full control over what the keyword refers to. call apply bind this Let’s take the code we used in the previous example: Previoulsy, we were calling , which was returning , because the value of inside the function refers to the object, which does not have a property. customer.address.askAddress "Dear undefined…" this askAddress address firstName call() By using the method, we can change what we want the value of to be : here we are going to change the value of to be the object: call this this customer customer.address.askAddress.call(customer); // Prints "Dear John, please enter your address" → Try it yourself It worked ! Note that we are not , we just the method onto it, so there are no parentheses after the method when we use . invoking askAddress attach call askAddress call The parameter to the method is what we want the keyword to refer to, in this case the object. call this customer apply() The difference between and can be seen when we have arguments to the function we want to use or on. call apply call apply We have created a new method , which takes two arguments and . calculateAge currentYear birthDate → Try it yourself Both solutions are working, the only difference will be : Using the function, we pass arguments separated by a comma, call Using the function, we pass arguments as values in an array apply bind() works just like , but instead of the function right away, it returns a function , with set to the first parameter passed to . bind call calling definition this bind() → Try it yourself allows us to explicitly set to the object we want. It generates a copy of the function that we stored in the variable , but it doesn't immediately the function. bind this calculateAge ageOfCustomer3 call We can call the function later on in the code and pass it the arguments it needs to execute. It can be extremely useful to create functions with preset arguments that will be called later, with already set to the right object. this 3. The global context (When is outside of a declared object) this is in the global context when you find it "into the wild", outside of a declared object (meaning that there has not been an object defined which contains the keyword ). this this In this case, its value refers to the global object, which, in the browser, corresponds to the object. window And in fact, every variable declared in the global scope is actually attached to the window object : → Try it yourself What if we find inside a regular function call (not an object or an object's method) ? In that case, the keyword also points at the global object. this this → Try it yourself Here when I call the method, the will be invoked, and prints the global window object, even though we are inside the object. Why is that ? greetCustomer nestedFunction customer What we have here is a regular function call inside a method, not a method of the object. Although it is written inside of the method, it is still a simple function. 4. The keyword new One way of creating an object is by using the keyword. new Consider this function Customer that defines an object: function Customer(firstName, lastName) {this.firstName = firstName;this.lastName = lastName;} Inside of this function, we are defining the properties of the object with the keyword , and they will be equal to the value passed to the function. this Hold on here, we are inside of a function; shouldn’t the value of be the global object, as we saw earlier ? this But in this case, we are not going to make a regular function call to create a new object. Instead, we are going to use the keyword, and the rule is that the value of changes when you use the keyword. new this new var customer1 = new Customer("John", "Smith"); console.log(customer1.firstName + " " + customer1.lastName); // Prints "John Smith" → Try it yourself now refers to the object that is created when the keyword is used. We are storing that object in a variable called , that can now access the and properties. this new customer1 firstName lastName Conclusion To know what is the value of inside of your code, always ask yourself the question: this Where is the function invoked ? There are some very tricky parts to that are reviewed in great detail in : this this article “The keyword is most misunderstood when we borrow a method that uses , when we assign a method that uses to a variable, when a function that uses is passed as a callback function, and when is used inside a closure - an inner function.” this this this this this You will surely often encounter some real-world problems while using native JavaScript or libraries like jQuery, and an understanding of the basic workings of will be of great help in those cases. this Want to learn more ? Check out my other articles on the basics of JavaScript: Hoisting in JavaScript: a Quick Guide Understand JavaScript Variable Scope with ease How to use JavaScript closures with confidence Grasp “By Value” and “By Reference” in JavaScript A Quick Handbook for Dates in JavaScript Work with JavaScript arrays like a boss I hope you enjoyed this to the JavaScript keyword “this”. introduction Feel free to comment and like this article so that others can find it easily on Medium !
