The Scope of “this” in Javascript

This is a blog about this.

What’s this about?

This article is about the infamous this in Javascript. We’ll see it’s different behaviours in different situations it used in. So let’s jump into this. (Pun Intended)

Setup

As I want you guys to learn by doing I suggest you to press cmd+option+j (for mac) or ctrl+shift+jand follow along with the code examples sown below in the github gists.

The story of ‘this’

If you are any other object-oriented language ‘this’ must be a very clear and easy concept for you. But in the world of javascript in order to make difficult things easy, we made easy things hard in some cases.

A function’s this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

Some reasons why it is so…

Javascript is a scripting language which means that there is no compilation step in code execution. The interpreter reads the code and executes it line by line. The environment (or scope) in which the line is being executed is known as “Execution Context”. The Javascript runtime maintains a stack of these execution contexts and the execution context present at the top of this stack is currently being executed. The object that “this” refers changes every time execution context is changed.

The different behaviours of 'this'

Default Behaviour

The execution context for execution is global by default. So if a code is executed in a simple function call then this refers to the global object (in case of nodejs) or window object (in case of browser).

If you execute the above gist in the browser console you’ll see true to be printed both times.

BEWARE

If strict mode is enabled for any function then the value of “this” will be “undefined” as in strict mode, global object refers to undefined in place of windows object.

Try copy pasting this in the console and see the difference.

IIFE

In IIFE (Immediately Invoked Function Expression) this performs in a similar fashion to a normal function shown above also abiding the fact that in strict mode value of “this” will be undefined inside the function.

Object-Oriented Programming

The ‘new’ Instance

When an object is created in Javascript using the new keyword then the function invoked is known as the constructor function. And the value of this depends refers to the newly created object.

In the case of word.displayProperty(), “this” refers to new instance word and in case of word2.displayProperty(), “this” refers to word2 which is a different instance of Those.

BEWARE of the execution context…

Look at the example below

What is happening here?

1. confused.those() — It prints false as now the this is not the window object, it is the confused object.
2. evenMoreConfused() — It prints true as it is invoked as a normal function and this is now the window object.
3. confused.these() — Even though it is the same as evenMoreConfused() but it is invoked by the confused object so this refers to confused object. So it prints false .

Arrow Functions

In an arrow function, a very interesting thing happens. When a fat arrow is used then it doesn’t create a new value for this . this keeps on referring to the same object it is referring, outside the function.

In the above example, you can see these and those differ only in function declaration but the scope for this changes.

Bind Method

Bind method changes the existing method and returns a new one in a way that this inside it now refers to the parameter provided to the bind function. See the example below.

So we just changed the execution context of these.displayName by the bind method.

Call, Apply Method

Call and Apply work the same way as Bind method. The only difference being they don’t return a new function but execute the existing one with the execution context provided in the parameters.

Call, Apply, Bind these methods can be used to set a custom value of “this” to the execution context of the function.

I’ll try to explain the above statement by the example below.

Summing Up

So I’ve tried my best to demystify the infamous this keyword in Javascript. I hope you guys liked my efforts to explain this concept as concisely as possible. Open for both criticism and compliments :)

For more reading

How to make your Résumé an NPM package

A to Z of Node.js Packages(unconventional)…

Web Scraping with Puppeteer…

📝 Read this story later in Journal.

🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >