The This Keyword

**Im a going to give a closer look to one of the features that confuses many developers in JavaScript; the This Keyword. Mostly that is because of the poor explanation or teaching materials about the this keyword. I personally I was really confused about this keyword and it was not easy to understand how it works, until I found these 2 rules to understand it easily; these are execution with: 1) A Method or function within an object and 2) with Regular function.

Frist of all What is the this keyword? This refences the object that is executing the current function.
If a function is a method in object, this references object itself. E.g.
// method -> obj

If the function is a regular function (which is not in object) this references the global object. E.g.
// function -> global (in browser: windows, in Node: global)

1st Rule within an Object
Let take an example:

const vehicle = {
  brand: "Toyota",
  productionDate: "2020-04-05",
  start() {
    console.log(this);
  },
};

vehicle.start();

Because start is a method in the vehicle object, we will get the vehicle object in the console.
Here is the output:
// {brand: 'Toyota', productionDate: '2020-04-05', start: ƒ start()}

If we add a stop method as follow:

const vehicle = {
  brand: "Toyota",
  productionDate: "2020-04-05",
  start() {
    console.log(this);
  },
};

vehicle.stop = function (){
    console.log(this)
}

vehicle.stop();

the output in the console is still the same, because stop is a method or a function in the object.

2nd Rule is with a regular function.
Let take an example:

function startVehicle() {
  console.log(this);
}
startVehicle();

if this function is long to the console, we are going to get a window object in browser and global in Node.
However, if we use a constructor function with the new operator the output will be different, let see a similar example:

function StartVehicle(brand) {
  this.brand = brand;
  console.log(this);
}

const start = new StartVehicle("BMW");

With this the output is:

// StartVehicle {brand: 'BMW'}

This time we are getting a new object here. By the way note that this object is a completely different object, it is not the StartVehicle object.
When you use the “new” operator it returns an empty object “{}”and then set this keyword to point the new object, that is ho we get the new object returned.

// new -> {} and then this point to the new object

Here is the take away, when dealing with a object this reference to the object itself.
However, when dealing with the regular function this by the default reference to the global object. But if you call a function using the new operator the case in our early constructor’s function example, this will reference a new empty object create by the new operator.

I am going to give a closer look to one of the features that confuses many developers in JavaScript; the This Keyword. Mostly that is because of the poor explanation or teaching materials about the this keyword. I personally I was really confused about this keyword and it was not easy to understand how it works, until I found these 2 rules to understand it easily; these are execution with: 1) A Method or function within an object and 2) with Regular function.

Frist of all What is the this keyword? This refences the object that is executing the current function.
If a function is a method in object, this references object itself. E.g.

// method -> obj

If the function is a regular function (which is not in object) this references the global object. E.g.

// function -> global (in browser: windows, in Node: global)

1st Rule within an Object
Let take an example:

const vehicle = {
  brand: "Toyota",
  productionDate: "2020-04-05",
  start() {
    console.log(this);
  },
};

vehicle.start();

Because start is a method in the vehicle object, we will get the vehicle object in the console.
Here is the output:

// {brand: 'Toyota', productionDate: '2020-04-05', start: ƒ start()}

If we add a stop method as follow:

const vehicle = {
  brand: "Toyota",
  productionDate: "2020-04-05",
  start() {
    console.log(this);
  },
};

vehicle.stop = function (){
    console.log(this)
}

vehicle.stop();

the output in the console is still the same, because stop is a method or a function in the object.

2nd Rule is with a regular function.
Let take an example:

function startVehicle() {
  console.log(this);
}
startVehicle();

if this function is long to the console, we are going to get a window object in browser and global in Node.
However, if we use a constructor function with the new operator the output will be different, let see a similar example:

function StartVehicle(brand) {
  this.brand = brand;
  console.log(this);
}

const start = new StartVehicle("BMW");

With this the output is:

// StartVehicle {brand: 'BMW'}

This time we are getting a new object here. By the way note that this object is a completely different object, it is not the StartVehicle object.
When you use the “new” operator it returns an empty object “{}”and then set this keyword to point the new object, that is ho we get the new object returned.

// new -> {} and then this point to the new object

Here is the take away, when dealing with a object this reference to the object itself.
However, when dealing with the regular function this by the default reference to the global object. But if you call a function using the new operator the case in our early constructor’s function example, this will reference a new empty object create by the new operator.

**