"This" in javascript

"This" in javascript

a simple and comprehensive article for this keyword in javascript

This is keyword in javascript."This" is not a keyword in javascript but also a keyword in many other programming languages but what the meaning of this keyword why we use this and how it use in function lets find out the answer of these question in this article.

hello folks, welcome to the other tutorial on javascript. let's get started.

what is this in javascript

this is a keyword that refers to the object in javascript but after reading this you must be thinking what is an object? so for now just remember everything in javascript is an object.

before going into deep dive lets see an example of this keyword

const person ={
  firstName:"tarun",
  lastName:"gupta",
  age:17,
  about: function()
{
return `${this.firstName} and ${this.lastName}`;
}
}
console.log(person.about());

explanation of the code:

here person1 is an object having some key-value pair and a method of about which is return the name and surname of a person.

Method in Javascript

A method is nothing just a function in an object is called Method. There is another Name for this method term in js called the object Method as it is a method in an object which is why it is called Object Method.

Binding of this in javascript.

binding of this is very crucial as well as important for a javascript developer to understand so let discuss the binding concept of "this" keyword in javascript.

const person={
firstName:"tarun",
lastName:"gupta",
age:23,
about:function()
{
return `your name is ${this.firstName} and lastname is ${this.lastName}`;
}
}
console.log(person.about());

we have object name person and method named about in this code so here what the use of this keyword in the about function. 'This' simply refers to the person's object here another code snippet that means the same

const person={
firstName:"tarun",
lastName:"gupta",
age:23,
about:function()
{
return `your name is ${person.firstName} and lastname is ${person.lastName}`;
}
}
console.log(person.about());

both codes have the same output as this simply refers to the object name in the simple function but 'this 'behavior is a bit different in the arrow function .

'This' keyword in arrow function

the functionality of this or binding of this in arrow is a bit different it refers to the global object of the javascript or just return's the window object in javascript or if we use strict mode in js then it returns undefined in an arrow function.

const person={
firstName:"tarun",
lastName:"gupta",
age:23,
about:()=>
{
return `your name is ${this.firstName} and lastname is ${this.lastName}`;
}
}
console.log(person.about());

so before ending the article lets discuss the keypoint that we discuss in this article.

this keywordworking in javascript
simple functionthis keyword simply refers to the object of that calling method
arrow functionthis keyword if we use it without strict mode it gives the window object and in strict mode, it gives the undefined value