Javascript; the Pillars to Master 'this'

In one of my previous posts, I mentioned that Javascript mastery is a must, but how do we get there? Let's jump in!

There are three fundamental pillars one should get comfortable with when learning JS, those are:

Pillar 1: The 'this' keyword.

Pillar 2: Prototypal inheritance.

Pillar 3: Closures

When coding, we don't see the "this" keyword, but it is being used. Although tricky in certain situations, the basics of "this" is <the object that is calling the method or its attribute>. IE, when we "console.log(this)" what is the value of "this"? If you call it in your global scope (browser), you will notice it is the "window" object.

You are telling the JS engine: "window.console.log(this)" so in this case, who is calling console.log? The "window" object.

So usually, the object calling the method will be your "this".

As you can see, when we console.log this on the global scope we get the window object:

When giving a first look at Javascript, many would believe that it uses classes as a way to inherit or extend parent functionalities to its child classes or instances, but that's not true. All of that class syntax was defined in the ES6 standard, which is syntactic sugar for its powerful prototypal inheritance. Javascript lets you?inherit functionality to your objects with its "Prototype Chain." Whenever you want to navigate through the chain of an element, for example, an array, just "console.log" it in your browser's terminal and keep going up the "Prototype", you will eventually get to the top, which is the famous "Object" constructor.

Try this on your browser's console and take a ride through the "Prototype Chain":

Not only does Javascript give shares the power of inheritance to give you the power of creating pseudo-classes, but it also has a very effective way of safeguarding your data and even letting you do "memoization" for your methods, all of this thanks to "closures".

So basically, if you create an "Execution Context" (by calling your function) and return another function, the newly returned function will have access to all of the variables and methods defined with it. That gives you the ability to use, in an encapsulated way, data that you don't want to be accessed by others, but only your function.

In the following code, we can see how we create a closure by returning a function "addOneToCount". We are able to see how the function has access to its internal lexical environment scope by accessing the variable "count". The function that is returned will always have access to its lexical scope:

So to recap, thanks to Javascript's flexibility, it can be used as a Functional or Object Oriented language (multi-paradigm language). This is thanks to the power of functions and objects being able to be passed in as arguments, as well as them being returned (also known as functions being First Class Citizens." Mastering Javascript is a must for any web developer.