UI Development

What is this keyword in JavaScript?

 

Introduction

This keyword in Javascript behaves differently when compared to other programming languages like Java. It confuses a lot of beginners and sometimes advanced developers as well. To understand this first we need to understand the execution context.

What is the execution context?

It is the environment in which the code executes, the environment consists of the value of this, variables, objects, functions. There are three types of execution contexts

  1. Global Execution Context: This is the default execution context in which JS code starts execution. All global code executes inside the global execution context.
  2. Functional Execution Context: It is called the context created by the execution of code inside a function. Every function has its own execution context.
  3. Eval: Execution context inside eval function.

What is this?

This in Javascript is a keyword that references another value, usually an object that references the current execution context, Or in simple words, we can say this references the object that is executing the current function.

This behaves differently in different scenarios. For example

  • If a function is a method is an object this references itself.
  • If the function is a regular function then this references the global object, Window object in browsers and global object in node.

This inside a regular function

In Browser

In Node

Here this references the window object as the function is in the global execution context. But one thing to keep in mind this behave slightly different in strict mode, One of the key difference with the non-strict mode is if you call a function inside a global context this will be undefined. But that’s not a big deal because we directly use window or global directly and not use this to refer to those objects.

Inside a constructor functions

here this refers to Video object rather instead of window object because when the new keyword is used it creates an empty object and sets this to point the empty object.

Inside an Object

Here whoIsThis is the method inside the object so it refers to the current object.

Inside arrow functions

Here this points to the window object because arrow functions do not bind to their own scope, but inherit it from the parent in the above case its the window object.

bind(), call(), apply()

Let’s suppose we have a function and an object, by default this inside function points to window object but we want to point it to the object then we bind the function to the object.

If we do not want to create a new function then we can use call() with the first argument to be the object to be referred and we can pass additional arguments as above.

The main difference between call() and apply() is that apply accepts the arguments as an array.

Conclusion

This is very important in JavaScript and the above are some scenarios where this creates a lot of confusion for a lot of developers. I hope this blog help to avoid errors in your code. And concepts like this helps to understand some complex concepts in JavaScript.

About The Author