Learning Code is Like Doing a Puzzle

For the past 12 weeks, I've started to embark on my journey into learning how to code in JavaScript and HTML. It's been a wild journey to making my first web application, one that I can only compare to completing a jigsaw puzzle. You see, completing a jigsaw puzzle requires not only having all the pieces, but figuring out how to put them together and knowing what the big picture looks like. Sometimes it takes a lot of time and can be extremely frustrating when your trying to find that one piece, but the end result is rewarding. Coding is the same way: understanding all of the pieces, putting them all together, and realizing the big picture is all integral into developing an application. I can say without a doubt that the one puzzle piece I still struggle with as a new developer, is the concept of context. It's the one piece of the puzzle I had to ask multiple questions: What is this, why is this, where is this, when is this?

What is Context in JavaScript?

In technical terms, context refers to the object to which a function belongs or is bound. It determines how the function is executed and how it can access variables, properties, and methods within its scope. The confusing part, however, is that context changes dynamically depending on when and how it is used.

There are two main types of context in JavaScript: Global and Function context. The global context is the default context in JavaScript. It represents the context of the entire program. This is definitely the most simplified state of context: When you define a function, object, or variable in the global context, it can be accessed anywhere in the program.

Functional context on the other hand, refers to the context within a specific function. Every function created in a program has its own internal context, with direct access to the global context. Where this can get really confusing, is when you have functions nested inside of other functions, or used as methods on objects.

In comes the concept of the keyword this.

The Big 4

The this keyword in JavaScript provides a reference to the current context that can allow a function to access and manipulate the methods and properties of the context object. This changes dynamically: where the function is invoked matters, and where the this keyword is used matters.

I like to think of context like an everyday office building: this person works at this office building, on this floor, in this suite, in this cubicle. The value of this depends on where you use it and what you are referring to.

There are 4 main ways the value of this can be determined:

Function Invocation: When a function is defined as a standalone function without any specified context, this refers to the global context. Here's an example:

We define the name, John, as a variable in the global context. Inside the greet() function, we can access that name via dot notation with the this keyword. To go back to the office analogy, think of the 'greet()` function as the office building, and our name variable as a specific person in a pool of people that work there (in the global scope). What if you want to go further, and access the value within an object key?

Method Invocation: When we call a function as a method on an object, the context of that function now refers to the object that owns the method. The context of this is now implicitly set to the specific object:

Here, the context of this never leaves the object; this will always refer to the object keys available within the object itself when called inside the greet() method. If the office is the global scope (everything outside of the object) and the object is the suite, then the object key become the cubicles, and the value becomes the person in that cubicle, in this case 'Alice'. What if we want to add a new suite altogether, with new cubicles for new people?

Constructor Invocation: Constructor functions are probably one of the coolest things in coding, and are one of the more digestible ways to understand the concept of context. When a function is used as a constructor with the new keyword, this refers to the newly created instance of the object. The context of this is automatically set to the newly created object.

In this example, the person() constructor function is being used to create entirely new objects, where this has context within each new object created; the context never overlaps between objects and is specific to the object being created. We utilize the new keyword to create a new person, wherein this references the creation of the name key/value pairing. You could even create more than just a name: this.age or this.height. Moving away from the office analogy, think of this one in terms of the details of individual people, and how the value of name, age, and height would change depending on the context of who you are referring to.

There is one last main method of invocation called explicit binding, and for the sake of the length of this blog post, I'm going to save that for another time. But you can imagine how utilizing this can be a very powerful tool. Although it can be confusing, it's all about thinking about what scope you are in, and tracing this back to it's reference. Sometimes working backwards can be beneficial.

Conclusion: The Power of .this

Understanding context can be very beneficial to writing effective and DRY JavaScript code. It reduces the need for a lot of repetition in your code and, for a newbie like myself, can really help you to understand how functions interact with objects. I recommend starting small with context, and slowly building bigger with experience. While context isn't completely necessary in writing code, and can make things a lot more confusing if not fully grasped, it can give you greater control over your code's behavior and provide some flexibility. Remember that context changes dynamically, and it is essential to consider the context in which a function operates when attempting to work this into your code.

Now get out there and try something new, and remember to never give up! Practice makes perfect, and that could never be more true than in developing skills in coding.