Summary

The provided web content discusses JavaScript's Reference type, explaining its role in property access, assignment, deletion, and this-binding, and its significance in understanding how functions are invoked in different contexts.

Abstract

JavaScript's Reference type is a fundamental concept that underpins the language's property access mechanisms, including property getting, assignment, and deletion. Unlike simple value access, the dot-operator in JavaScript involves a Reference, which consists of a base value (the object being accessed) and a referenced name (the property name). This Reference type is crucial for understanding how this is bound within a function call, as it affects the function's execution context. The article emphasizes that the way a function is accessed—either directly from an object or as a standalone value—impacts the binding of this during the function's invocation. This distinction is particularly important in JavaScript because functions are first-class objects, and their behavior can vary significantly depending on the invocation context. Mastery of References is presented as essential for developers to avoid common pitfalls and bugs related to function invocation and context binding in JavaScript.

Opinions

The author suggests that understanding the Reference type is not just academic; it has practical implications for writing bug-free JavaScript code.
The article implies that the nuances of the dot-operator and this-binding are often overlooked by developers, which can lead to confusion and errors.
It is the author's view that the Reference type, while not directly usable in code, is a key concept for grasping the inner workings of JavaScript's object property interactions and function invocation patterns.
The author posits that the behavior of this in JavaScript functions is intrinsically linked to how the function is accessed, whether through a property reference or as a bare value, which can lead to different outcomes even with the same function.
The article conveys that a solid understanding of References can demystify the behavior of functions in JavaScript, especially when dealing with methods like apply, bind, and arrow functions, which provide additional layers of complexity to this-binding.

JavaScript 201 — Reference Type

Understanding how property getting, property assignment, property deletion, and this-binding are all related

In a lot of programming languages, the dot-operator (.) is commonly referred to as the property accessor operator. We see this in C, Java, Python, and JavaScript, among others. For instance, the consequence of the statement

is to get the current value of the "foo” property on x and put it in the variable y.

In JavaScript, in particular, the dot-operator is a little more nuanced than simple property getting, and this nuance is the driver behind the delete operator and this-binding, among other things.

In JavaScript, the result of a dot-operator expression is not simply the current value of the indicated property: if it were, examples like the following would be nonsensical:

The above statement means to delete the property named “foo” from x. It does not mean to delete the value of 12 from the system.

The ECMAScript standard (the language definition behind JavaScript) defines the result of a property accessor expression as a Reference. Instead of holding a simple value, it keeps track of the object being accessed, which is called the base value (the value on the lefthand side of the .) and the name of the accessed property, which is called the referenced name (the name on the right hand side of the .).

A Reference is an ECMAScript specification type, which means you can’t create values of this type explicitly, or directly utilize this type in your code. It’s intrinsic to the runtime itself and never exposed to your code — it’s just a mechanism for the runtime to perform other operations. These operations include some basic actions such as:

property getting
property assignment
property deletion
this-binding

Property Getting

This is an obvious one. A Reference type is used to get the current value of the property indicated by the referenced name from the Reference’s base value. When a Reference appears in a place where a value is expected, the runtime performs this operation on the Reference as part of the evaluation.

Property Assignment

This happens when a Reference appears on the left hand side of an assignment expression: the runtime assigns the value on the right hand side of the expression to the property indicated by the referenced name on the Reference’s base value.

The “foo” property of x is assigned a value of 12.

Property Deletion

This operation is applied when the delete operator is used: the runtime will remove the property indicated by the referenced named from the Reference’s base value.

The “foo” property is removed from x. 12 still exists.

This-Binding

This is where things get interesting. When a function is called, it matters how it is accessed for the call. Consider the following snippet:

On line seven we store the function from x.frob into the frob variable. This does a normal property getting operation to get the current value of the “frob” property from x, which happens to be a function. We can now call this function by accessing it from the “foo” property of x, as shown on line eight, or by accessing directly in the frob variable, as shown on line nine.

However, these two ways of accessing it are different, and they give different results. This is because the x.frob on line eight is not a simple property getting operation that results in the current value: instead, it is a function call expression where the function being called is indicated by a Reference, which causes the function to be invoked with this set to the base value of the reference.

On line nine, the function to invoke is not indicated by a Reference, so the function is invoked with this set to the global environment record (e.g., window in a browser runtime).

The function being invoked is the same on both lines, but the way this is set for the invocation depends on how that function is accessed.

The binding of this in a function call gets more complicated with things like apply, and bind, and fat-arrow functions. These details are beyond the scope of this article, but important nonetheless.

Why It Matters

You could probably get by doing property getting, property assignment, and property deletion without ever thinking about Reference types, but because JavaScript functions are first-class objects (i.e., they can be passed around like any other value), understanding the consequences of using them in different ways is critically important.

Whether you invoke a function as a property on an object (and on what object) or as a bare value matters and could lead to very different consequences. Understanding References provides a simple model for understanding how these and related concepts work, to avoid confusion and bugs.