This Keyword in JavaScript

Kheerganga Top, Himanchal

this keyword is one of the most misunderstood and complex concept of JavaScript. I’ve spend years working in JavaScript and sometimes such scenarios comes where it becomes difficult to understand what is this referring to.

In this article I’ll try to explain as many as scenarios which I came across which uses the this . And may be one of the scenario may help you in understanding to concept of this more clearly.

So first let’s see what this refers to? 🤔

The nature of this is fluid. The value of this changes based on the context in which the method id being called . this refers to the context in which it is being called.

Lets understand this by an example:

In the above code, we are using this at two different places and the value of this is different at both the places, which is decided by the context on which it is being called.

Now let’s see how this behaves inside various code blocks.

  1. this inside global context
this inside a global js file always points to window object.

2. this inside a function

this inside a function points to window object.

3. this inside constructor function

this inside a constructor function points to the contructor keys.

4. this inside a function inside an object

this inside an object’s function points to the instance of the object.

5. this inside an inner function

this inside an inner function points to the window object.

6. this inside a function and strict mode is on.

this is because, when ES3 released, ECMA has concern, may be developers forgot to invoke constructor with new keyword.

In Addition to above scenarios, we have an additional concept top understand. And that is arrow functions. this inside an arrow function works differently.

Inside an arrow function, this has no scope of itself. It always points to the scope of parent.

  1. this inside an arrow function — in this example, the parent scope of the samplemethod is window
this inside an arrow function points to parent.

2. this inside an inner function as an arrow function. Case 1. When arrow function is inside an normal function.

3. this inside an inner function as an arrow function. Case 1. When arrow function is inside an arrow function.

Apart from these, we can also control the context of this manually by using JS inbuilt methods call bind and apply . For this article it will be too much to explain these. But for the demonstration purpose I am showing how can we change the context of this using call :

For further explanation:
https://youtu.be/-NnxwkJ4yIg

Practice Questions:
https://dmitripavlutin.com/javascript-this-interview-questions/

--

--

--

A passionate iOS Developer since 2014.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Implementing a global snackbar in Nuxt.js & Vuetify using Vuex

Revolutionizing Web Development with Node.js Part 2

How to make a browser walkie-talkie using Node.JS and Socket.IO

Connecting Power BI with Google Sheet

Lost in Translation: Numbers, Strings, and Arrays

Chemistry required several translations of properties, from mass to volume to density, etc.

JavaScript News and Updates (May 2020)

Context and ‘this’ Basics in JS

Using Environment Variables with Express for Local Dev & Azure App Service

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
राहुल मिश्रा

राहुल मिश्रा

A passionate iOS Developer since 2014.

More from Medium

12 Useful JavaScript Newsletters

Part 2: Common Javascript Mistakes and Best Practices

Refactoring Javascript Code: Truthy and Falsy

CleverTap Javas Hackathon Experience