😳🤯 💡 🚀 🔥

Search... Write a post

Ritik

Understand "this" keyword in

13 @ritik_dev_js

Being a JavaScript Dev.

6

14
JavaScript + FOLLOW

location
Ritik Apr 18 ・2 min read
India

#javascript #react #angular #vue joined

Mar 13, 2020
DISCUSS (1)

Most of the time we confuse with this keyword in JavaScript. So lets simplify
it. dev.to is where software developers stay in
the loop and avoid career stagnation.
"this" is just used to create a reference to any object.
Sign up (it's free!)
Let say we have a two object "studentFirst" and "studentSecond".

const studentFirst = {
name:"ritik",
age:"21"
}

const studentSecond = {
name:"gaurav",
age:"45"
}

And a function "getDetails" which will log the student details in console.

function getDetailsFirst(){
console.log(`${studentFirst.name} is ${studentFirst.age} years old.`);
}

function getDetailsSecond(){
console.log(`${studentSecond.name} is ${studentSecond.age} years old.`);
}

getDetailsFirst();
getDetailsSecond();

//ritik is 21 years old.

//gaurav is 45 years old.

Above we are using two seperate function and using object properties by
calling their Object seperatly.
It can be done more efficiantly using "this". Lets see:

const studentFirst = {
name:"ritik",
age:"21"
}

const studentSecond = {
name:"gaurav",
age:"45"
}

function getDetails(){
console.log(`${this.name} is ${this.age} years old.`);
}

getDetails.call(studentFirst); //this gets a reference to studentFirst Object //A

getDetails.call(studentSecond);//this gets a reference to studentSecond Object //B

//ritik is 21 years old.

//gaurav is 45 years old.

Here "call" method is used to create a reference for "this" in "getDetails"

method.
At position A "this" creates a reference to "studentFirst".
At position B "this" creates a reference to "studentSecond".

Now lets see how does "this" behave in different scopes.

Open Chrome Dev-Tool and in console just log "this".

console.log(this);
//Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …}

So in global scope "this" is refering to "window" object.

Now lets try "this" inside a object.

const student = {
name:"ritik",
getDetails(){
console.log(this);
}
}

student.getDetails();
//{name: "ritik", getDetails: ƒ}

Inside a Object "this" refers to scope of same Object in which it is defined.

const student = {
name:"ritik",
getDetails(){
console.log(this.name);
}
}

student.getDetails();
//ritik

or you replace "this" with Object name "student" like this:

const student = {
name:"ritik",
getDetails(){
console.log(student.name);
}
}

student.getDetails();
//ritik

Most of the time "this" is seen inside a constructor which is one of the
usecase of it.

Hope you get the basic of "this" in JavaScript.

{This post is also available on ritikrana.netlify.com}

Ritik + FOLLOW

Being a JavaScript Dev.

@ritik_dev_js rtktwt ritikrana.in

Add to the discussion

PREVIEW SUBMIT

Apr 18
***

tl;dr this refers to the thing on the left side of the dot

2 REPLY

code of conduct - report abuse

Classic DEV Post from Oct 11 '19

What was your win this

week?
Jess Lee (she/her)
Jess Lee (she/her)
Got to all your meetings on time? Started a new project? Fixed + FOLLOW
a tricky bug?

48 86

Another Post You Might Like

CSS Quickies: @supports

Michael "lampe" Lazarski
What is CSS Quickes? I started to ask my beloved community
on Instagram: "what CSS propert... Michael "lampe" Lazarski

135 9 + FOLLOW

Another Post You Might Like

How YOU can build and

publish your own extension
ITNEXT
to VS Code Marketplace + FOLLOW
Chris Noring
Want to learn how to build your own extension and make it
accessible for anyone to download and install?

98 6

window.location Cheatsheet Simple node debug logging

Samantha Ming - Apr 22 Paweł Kowalski - Apr 22

Colorize Your Console.Log() Creating Firefox browser

extensions- 12
ᴄᴀᴛᴀʟɪɴ ᴘɪᴛ - Apr 22 Nabendu - Apr 22

Home About Privacy Policy Terms of Use Contact Code of Conduct

DEV Community copyright 2016 - 2020