As a former science, technology, engineering, and math teacher, my favorite part of teaching introductory code to middle school students was likening the subject to language learning. I loved opening that door to students who did not consider themselves “science-y” or “tech-y.” Framing coding as language learning allowed these particular students to see programming as mastering a vernacular pattern and thus wielding a powerful and creative tool. Through human-computer communication, these students could automate art pieces, robots, and a variety of other mechanisms.
Now that I am further along in my programming journey, I can see both the advantages and limitations of this analogy. Most obviously, computers are exacting and do not care for florid creativity. Most challengingly, however, I did not expect programming languages to contain so many self-referential abstractions that have no counterpart whatsoever to human speech. There is no dictionary that describes 501 verbs in Javascript. And thus, I feel as though my battle to understand this is just beginning.
Of course, by this, I mean the Javascript keyword this. Even describing the keyword is confusing! At the current tech company where I work, I see this used in our immense and terrifying codebase over and over again. This is a shapeshifter, morphing to meet the developer’s contextual needs and ultimately providing the parity in code that only a self-referential abstraction could. Despite my intimidation, I am excited to master this powerful and unique piece of language.
Put most simply, this refers to an object, which is essentially a variable or data type with many properties. Without a specific object to refer to, this refers to the global object, which is an object that is always present in the global context of the running code. Oftentimes, the global object represents the window containing the DOM. To give a concrete and frequent example, calling this to refer to a global object will return the tab in which you are running your code:
This refers to the global object in a few instances:
When this is used alone or as the definition of a variable:
this;
or
let i = this;
i;
When this is used in an unrestricted function that is unattached to an object:
function abc(){
return this;
}
abc();
On the other hand, this refers to specific objects in Javascript when it is defined within an object’s properties, specifically within a key/value pair that includes a function. This can be paired with the object’s other keys to pull their value.
In the above example, the specs function within house1 calls house1’s other values with this. In this particular function, calling this.bedrooms within specs, for example, would be the same as calling house1.bedrooms outside of the house1 object.
Because pieces of code are more useful when they can be applied broadly to other pieces of code, this comes with a series of methods that allow for its reuse. These methods allow objects to externally “borrow” a function defined in another object without having to define the function in every single object created. In the example above, it is likely that this program would include other house objects. These house objects can be constructed without defining their own method. Using the call() method allows one house object to be passed into the specs function.
The call() method furthermore allows objects to borrow methods defined elsewhere, even if these objects need additional arguments to complete the function. By passing in additional arguments into call(), the versatile combination of this and call() allow methods to be used in a variety of scenarios.
The this suite of methods also contains bind(), which allows programmers to create variables that can be used in different parts of the code. Because this cannot technically be reassigned a value, the bind() method allows a particular variable to be preserved in time and used elsewhere in the code. This variable can be passed as an argument into another function’s parameters, called upon, console logged, and more.
Ultimately, understanding how to program with the this keyword, along with correctly interpreting its meaning when viewing other code will undoubtedly unlock several coding skills. This aids in shrinking the redundancy within code, allows methods to be used beyond the original object to which they are assigned, and is generally essential for object-oriented programming. While computers may not be able to understand concepts of human language like nuance, innuendo, or inflection, I think they certainly have us beat with the utility of this.
Credits:
https://developer.mozilla.org/en-US/docs/Glossary/Global_object
https://www.w3schools.com/js/js_this.asp
https://developer.mozilla.org/en-US/docs/Web/API/Window