What is “this” in JavaScript

JavaScript like other programming languages, also provides us the special keyword “this.”

One can think of “this” keyword as a shortcut, which refers to the object from where the function was invoked. As this refers to an object from where the function was invoked, we can access all the values and properties of the object. Any changes made to this will also update the object being referred.

But it rather behaves differently in JavaScript than in other languages. The value of this is dependent on different factors, first the object from where the function was invoked and secondly whether the scope is in strict/non strict mode(will be explained below).

Let’s look at what is “this”:

this points to the window object by default

The above example gives us the window object. This happens because the execution context here is Global, meaning it is not blocked by any function/object scope.

Let’s look at another example:

object scope

As we can see in the above example the value of this points to the testObject. This is because the value of this depends on the objects that invokes it, in this case the testObject.

Let’s make some changes in the above example and see whether the output varies or not:

using functional expression

The output changed and now this points to the window/global object. This happened because the value of the invoking object changed from the testObject to the global object.

Let’s make more changes to the above example:

adding ‘use strict’

This is the second dependency, when we use “use strict”, the value of this points to undefined for functions invoked in global scope or for anonymous functions which are not bound by any object scope.

Let’s update the above example and invoke the function from an object:

using ‘use strict’

As we can see, the use strict only works on globally invoked functions.

What if we wanted the value of this to change as per our requirement, or rather what if we wanted to define the value of this being passed to the functional scope.

Post ES5 new methods were added to invoke functions. We got two more methods to invoke a function called call and apply and another method called bind to bind a value/object to the function, which in turn will be referred by this.

*Note bind method only works with functional expressions not declarations.

  • How to bind values/objects to function expression:
binding value to this reference

As we can see the value of this is pointing the myObject, which was passed by us.

  • Function invocation using call and apply:
call and apply

The call and apply way of invocation helps us bind value/objects to the this of the function. As it is a function invocation it lets us pass parameters.

*Note the first parameter is referred by the this keyword.

But if both of them behave the same, how to decide when to use what. It is rather simple, when there are a few parameter to be passed to the function we can prefer the call method. apply is preferred when the number of parameter is more. As for apply we pass the parameters in an array format, so it is easier to modify and update the data, which will be passed in the function arguments.

I hope this helped you in understanding “this” better.