What is this inside a function JavaScript?

In simple words, if we try to understand, “undefined” is the absence of a value. It is one of the primitive data types.

As per the MDN definition,

undefined is a property of the global object. That is, it is a variable in the global scope.

A variable that has not been assigned a value is of type undefined. A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value. A function returns undefined if a value was not returned.

Let’s try to understand by a simple example.

The output for the above program will be as follows.

undefined has the list of friends that
undefined has the list of friends these
undefined has the list of friends those
undefined has the list of friends they

Let’s try to understand the code in a step-wise manner.

If you see, the “unleashThis” is an object literal which has two properties and a function.

Let’s see how the JS engine will execute the above code.

The first line of the code is the variable that gets declared and not assigned at this point in time.

Note: Please don’t get confused with the “this”. We are yet to arrive at the conclusion point.

Moving on…

On the Call stack, in the global Execution Context, the “unleashThis” is declared.

Remember one thing, if you try to assign the function to a variable, it will put the entire function on the call stack.

Note: The variable when put on the call stack, gets undefined but in case of the entire function gets put on the call stack. if there is no return value from a function, it returns undefined.

Line 11 will be put on the call stack where we are invoking the loopItNow.

Now, here comes the twist.

Remember, whenever there is a function invocation, a new Execution Context gets created.

When a function is invoked, an activation record, otherwise known as an execution context, is created. This record contains information about where the function was called from (the call-stack), how the function was invoked, what parameters were passed, etc.

The moment when the execution engine reaches line 5, what should be the “this” value? 🤔

Currently, a new Execution context has been created where the scope is local to the object. The reason is that you have to see from where the “this” keyword has been invoked.

“this.friends” belongs to the local scope of the unleashThis object. So, the value of friends array will be placed in it.

Now, the next line of execution will be Line 6 where we are trying to print the value to the console.

Remember, the moment the JS engine sees the “()”, it gets excited to create a new Execution Context.

If you try to visualize the JS engine execution code. Let’s see the diagram below.

So, in line 6, when “this” tries to find the “name” in the scope of the window, it doesn’t find it and returns undefined.

Now, the next question will be, what could be the probable solution for the above problem.

Solution 1: Using var self=this inside the loopItNow function

Solution 2: Using Arrow => function

Solution 3: Using the bind method

Solution 4: Explicitly attaching the “this” keyword to the anonymous function

Let’s try to understand every solution one by one.

Solution 1: Using the var self=this;

This “var self=this;” is one of the most used statements to handle “this” context problem even in the large enterprise application.

What do you think this statement is doing?

Actually, it will be interesting to understand that the moment when line 6 starts executing, a “Closure” on the loopItNow is created that holds the “self” object. The self object has now the same properties and function that the unleashThis object contains. But, the only thing which gets created is the new lexical environment that gets enclosed.

If you closely look at the code, the loop when starts getting executed, it encloses the outer variable along with the lexical environment, which is nothing but a “Closure”. It may be a bit difficult to understand but it will get overtime.

Solution 2: Using the arrow function

As you know that the arrow(=>) function doesn’t have its own binding of “this”. So, when using the arrow function, there won’t be a new binding to “this”, it will be still using the binding from the loopItNow function which has the local scope of the “unleashThis” object.

Arrow functions discard all the normal rules for this binding and instead take on this value of their immediate lexical enclosing scope.

Arrow functions are just anonymous and not named.

Solution 3: Using the bind function

Note: The bind method returns a function. Using the “bind” method

The value to be passed as the this parameter to the target function func when the bound function is called. The value is ignored if the bound function is constructed using the new operator.

When using bind to create a function (supplied as a callback) inside a setTimeout, any primitive value passed as this is converted to an object. If no arguments are provided to bind, or if the this is undefined1 or undefined, the this of the executing scope is treated as the this for the new function.

Solution 4: Explicitly attaching the “this” keyword to the anonymous function

If you see the above solution, for-each method takes “this” as a callback and “this” as an argument.

“this” encloses the unleashThis from the local object.

Few key properties of “this” keyword.

Remember, this does not, in any way, refer to a function’s lexical scope. It is true that internally, the scope is kind of like an object with properties for each of the available identifiers.

this is neither a reference to the function itself, nor is it a reference to the function’s lexical scope.

this is actually a binding that is made when a function is invoked, and what it references is determined entirely by the call-site where the function is called.

Can we use this inside a function in JavaScript?

this in a Function (Strict) JavaScript strict mode does not allow default binding. So, when used in a function, in strict mode, this is undefined .

What does this => mean in JavaScript?

It's a new feature that introduced in ES6 and is called arrow function. The left part denotes the input of a function and the right part the output of that function.

What is this inside a class in JavaScript?

The this value is different in each context. Class constructors are always called with new , so their behavior is the same as function constructors: the this value is the new instance being created. Class methods behave like methods in object literals — the this value is the object that the method was accessed on.