Advance Use of “this” in JavaScript

this cover image

Today world is capture by JavaScript and JavaScript is easy to learn but hard to master. With this master journey we will cover some best use case of “this” in JavaScript.

In JavaScript this is the function invocation context.

This funny meme

Let understand this from Mozilla -

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.

The challenge is that this has a complicated behavior. That’s why during a JavaScript coding interview you might be asked how this behaves in certain situations.

The best way to get something clear, required a practice on topic. So we're going to come across 7 best use case of this in JavaScript.

Case 1: Variable vs property

Variable and property can change an according to function declaration. Let explore with example.

Answer -

‘Hello, World!’ is logged to console. Check Ex.

object.getMessage() is a method invoke, that’s why this inside the method, There’s also a variable declaration.

const message = ‘Hello, Earth!’ inside the method.

The variable doesn’t influence anyhow the value of this.message.

Case 2 : Cat name

Great with first question, now check another snippet.

Answer -

‘Fluffy’ and ‘Fluffy’ are logged to console. Check Ex.

When a function is invoked as a constructor new Pet(‘Fluffy’), this inside the constructor function equals the constructed object.

this.name = name expression inside Pet constructor creates name property on the constructed object.

this.getName = () ⇒ this.name creates a method getName on the constructed object of Pet class. And since the arrow function is used, this inside the arrow function equals to this of the outer scope — the constructor function Pet.

Invoking cat.getName(), as well as getName(), returns the expression this.name that evaluates to ‘Fluffy’.

Case 3 : Delayed greeting

What if we delay the invoke function.

Answer -

After a delay of 1 second, undefined is logged to console. Check Ex.

While setTimeout() function uses the object.logMessage as a callback of around 1 second but still, it invokes object.logMessage as a regular function, rather than a method. And during a regular function invocation this equals the global object, which is window in the case of the browser environment.

So, setTimeout() have a scope of window, and in window there is no variable like message.

That’s why console.log(this.message) logs window.message, which is undefined.

Challenge: Can you change and code snipped and make the console.log(this.message) printed as ‘Hello, World!’.

Case 4 : Artificial method

In below snippet can you call logMessage function so that it logs “Hello, World!”?

Answer — there is 3 way to achieve this console.log. Any of them is correct

Method 1 :

Use of call method — Read more.

Method 2 :

In use of apply method, we change the scope of logMessage scope to object. Read more.

Method 3 :

Use of bind method — Read more.

To check the working of all 3 method. Check Ex.

Case 5 : Greeting and farewell way

Ok, If you solve above 4 code snippets then you have good knowledge in JS this, but now let’s check some challenging way to use this.

Anwser -

‘Hello, World!’ and ‘Goodbye, undefined!’ are logged to console.

When calling object.greet(), then method have a scope of main Object object, then greet is a regular function. Thus object.greet() returns ‘Hello, World!’.

But farewell() is an arrow function, so this value inside an arrow function always equals this of the outer scope. The outer scope of farewell() is the window scope, where this is the window object. Thus object.farewell() actually returns ‘Goodbye, ${window.who}!’, which evaluates to ‘Goodbye, undefined!’.

Case 6 :Tricky length

So far so good, can you find the value of length.

4 is logged to console. Check Ex.

callback() is called using regular function invoke inside method(). Since this function call inside method, but callback definition is done before calling, and only invoking is happening in method(), this.length is evaluated as window.length inside callback() function.

The first statement var length = 4, being in the outermost scope, creates a property length on the window object: window.length becomes 4.

Finally, inside the callback() function this.length evaluates as window.length — 4 being logged to console.

Case 7 : Calling arguments

Final but the toughest one. What logs to console the following code snippet.

Anwser :

3 is logged to console. Check Ex.

obj.method(callback, 1, 2) is invoked with 3 arguments:

As result the arguments special variable inside method() is an array-like object of the following structure:

Because arguments[0]() is a method invocation of callback on arguments object, this inside the callback equals arguments. As result this.length inside callback() is same as arguments.length — which is 3.

If you solve any 5 problem of this, then you have a good understanding of this in JavaScript.

Happy coding, and thanks for reading this blog. Do write a comment if you have more about the this in JavaScript.

Read code • Learn Code • Write code • Relax • Write code, www.linkedin.com/in/ankit1srivastava

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