Javascript’s this is a concept that baffles programmers both new and experienced alike. Although there are some useful guides out there, I always like to add my personal spin on things. But of course my own personal spin isn’t enough, so I’ve enlisted the help of the lovely Mariam Sallam!

But let’s start with an entirely unrelated subject, English.

Rachel went to the store to buy milk. She ran into her friend Megan, who was there to buy a steak. They had a conversation about the Bechdel test. She said that they should have a party soon. She agreed, and set a date in her calendar.

In javascript, this works similar to the pronouns in the above paragraph. Who is she in the second sentence? It’s Rachel! We could have just as easily written Rachel again, but that would look… weird. We use pronouns to replace Rachel, and we used the context of the sentence to know that the antecedent is Rachel. In the next sentence, we are introduced to Rachel’s friend Megan, and instead of saying “Megan and Rachel” in the following sentence, we replace their names with “they.”

All of this (pardon the pun) is fine and dandy, until we get to the next sentence: “she said they should have a party soon.” Who does “she” refer to in this context? The problem with the sentence is that it is poorly written and has what we call lexical ambiguity — it is unclear as to whether Rachel or Megan is speaking at this point. That’s where the confusion begins. In the next sentence, “she” agrees. Even more ambiguity! Where’s the definition!? Where is the structure!?

Similarly, when we start using this in javascript, things can go from clear as day to opaque as mud in a single function call. For example,

if we were to call the honk method on the car object, we would see a console message for beep . However, when we pass that as a callback function inside of some other function like the following example:

we would instead receive an error about how the window does not have a sound method. What happened?

Much like the context of the characters in our story, variables within functions have a scope. Scope is the block of code to which our variables are available to use, and can either be global or local to a specific function. The javascript keyword this is special in that it can change its value depending upon the scope in which it is used, which also leads to its confounding nature.

In the first code example, the value of this is the object that the method it is in — “car”. Car gets substituted into where the this is, so when we run car.honk() we then get the string that is the value for car.sound.

However, the second code example renders an error when the method is used as a callback on line 11. This is due to the fact that, when a method is used as a callback, this loses its scope and reverts back to its default value — the Window. A more technical definition is that the a reference to the method is passed, not the object and the method attached to it. Hearkening back to our English example, it is like saying someone went to the store, without ever specifying as to whom. In order to set the value of this when we use the function, we can use the .call() or .apply() methods chained to the end of a function. We can even create new functions using the .bind() method in order to re-use the same function with differing context! Masterful use of call, apply, and bind can keep this the value that we intend for it to be, while keeping our code DRY, efficient, and most importantly, readable.