‘this’ keyword in JavaScript

If you are new to the world of JavaScript, then you may find ‘this’ keyword a little bit tricky. In this blog, I will discuss some basics of ‘this’ keyword, how we can use and its problems.

What is ‘this’?

Generally, this keyword refers to …


This content originally appeared on DEV Community and was authored by Debajit Mallick

If you are new to the world of JavaScript, then you may find 'this' keyword a little bit tricky. In this blog, I will discuss some basics of 'this' keyword, how we can use and its problems.

What is 'this'?

Generally, this keyword refers to the object it belongs to or the parent object. Now, it also varies on which context we use it. Like, in a method, 'this' refers to its parent object. Alone, 'this' refers to the global object. In a function, 'this' refers to the global object. But in a function with 'strict' mode, 'this' refers to undefined. In an event, 'this' refers to the element that received the event. Ex:-

Alt Text

But sometimes it creates a lot of confusion. Ex:-

Alt Text

When we are using 'this' in the setTimeout it creates its context for 'this'. So it isn't able to access 'this' of the outer scope and bound to its scope. As 'this' is not defined within the function, the output is undefined. There are two ways to resolve this problem.

  • Using another variable: We can create another variable inside the function and use that to access id.

Alt Text

  • Using the arrow function: We can also use the arrow function to resolve this problem. As the arrow function doesn't create its own context of 'this', we can access the 'this' of its parent.

Alt Text

If you like my blogs and want to connect with me, follow me on LinkedIn and Twitter.


This content originally appeared on DEV Community and was authored by Debajit Mallick


Print Share Comment Cite Upload Translate Updates
APA

Debajit Mallick | Sciencx (2021-02-21T14:52:53+00:00) ‘this’ keyword in JavaScript. Retrieved from https://www.scien.cx/2021/02/21/this-keyword-in-javascript/

MLA
" » ‘this’ keyword in JavaScript." Debajit Mallick | Sciencx - Sunday February 21, 2021, https://www.scien.cx/2021/02/21/this-keyword-in-javascript/
HARVARD
Debajit Mallick | Sciencx Sunday February 21, 2021 » ‘this’ keyword in JavaScript., viewed ,<https://www.scien.cx/2021/02/21/this-keyword-in-javascript/>
VANCOUVER
Debajit Mallick | Sciencx - » ‘this’ keyword in JavaScript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/21/this-keyword-in-javascript/
CHICAGO
" » ‘this’ keyword in JavaScript." Debajit Mallick | Sciencx - Accessed . https://www.scien.cx/2021/02/21/this-keyword-in-javascript/
IEEE
" » ‘this’ keyword in JavaScript." Debajit Mallick | Sciencx [Online]. Available: https://www.scien.cx/2021/02/21/this-keyword-in-javascript/. [Accessed: ]
rf:citation
» ‘this’ keyword in JavaScript | Debajit Mallick | Sciencx | https://www.scien.cx/2021/02/21/this-keyword-in-javascript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.