What is this in Javacript and why is it so confusing?

this in Javascript is said to be one of the most confusing topic in Javascript. It is so because the value of this behaves differently on various scenarios causing a lot of chaos and confusing among developers. But with that said, it's not as that difficult that it seems.

In JavaScript, this variable is a variable that every execution context gets, in a regular function call. Every JavaScript function has a reference to its current execution context while executing, called this. Execution context means here means the manner of calling of functions.

this refers to the object that is executing the current function.

To make things super clear, lets understand one thing. Functions those are attached to an object is known as method, else it is known as function.

If function is regular function, this refers to the global object that is window object in DOM.

If function is a method, then this refers to that object itself.

To understand this, lets first console the value of this to see what it refers

Okayy, but now what is this window object?

According to the MDN docs, the Window interface represents a window containing a DOM document; the document property points to the DOM document loaded in that window.

Pretty confusing right 😵! Lets make it super easy..

The window object represents a window in browser. An object of window is created automatically by the browser. It contains information related to your current browser window. For example, the URL for the current page can be found in window.location object and window.innerHeight gives current of the browser. Amazing 😲!

Examples are the best and quickest way to understand things, so lets try to understand this keyword with the following example:

Regular Function

function greetUser(){
console.log(this)
}

greetUser()

Output:

Window object

Pretty much what we expected right!

Lets try the second case now

Method functions

const personInfo={

name: "Tim",
age:24,
runs(){
console.log(this)
}
}


personInfo.runs()

Output:

{name: "Tim", age: 24, runs: ƒ runs()}

Now lets take another example

const personInfo = {
  name: "Tim",
  age: 24,
  pets: ["cat", "dog", "horse"],
  runs() {
    this.pets.forEach(function (eachPet) {
      console.log(eachPet);
    });
  }
};
personInfo.runs();

Output: cat dog horse

Now a key point to remeber, if we try to console the value of this along with the eachPet , we will be accessing the window object as this is present inside a regular function and not a method. Remember the rules where we have defined it clearly..

Now in order to acces the value of the keys of the object , try to access it with the help of second argument of forEach using this. Hence we will be able to get values required.

const personInfo = {
  name: "Tim",
  age: 24,
  pets: ["cat", "dog", "horse"],
  runs() {
    this.pets.forEach(function (eachPet) {
      console.log(this.name, "has a", eachPet);
    }, this);
  },
};
personInfo.runs();

Output:

Tim has cat Tim has dog Tim has horse

And yes, that's all about this...!

If you have read this far and understood how this, give yourselves a pat on the back because you have conquered one of the most confusing Javscript topics!!