If you are starting out as a full-stack developer, you definitely come across one of the most popular languages which is JavaScript. There are various keywords like “this” keyword in JavaScript that play a vital role in backend development. <\/p>\n\n\n\n
In those JavaScript keywords, the this keyword is something that every developer should know! If you don’t know what it is or how to use it, this article is right there to help you! So, let us get started!<\/p>\n\n\n\n
JavaScript<\/a>, one of the most popular programming languages, is widely used for building dynamic web applications. <\/p>\n\n\n\n One of its unique and sometimes confusing features is the “this” keyword. Understanding how this works is essential for mastering JavaScript<\/a>, as it behaves differently than in many other programming languages. <\/p>\n\n\n\n In JavaScript, “this” refers to the context in which a function is executed. It is a reference to an object, and its value depends on where and how the function is called.<\/p>\n\n\n\n When this is used outside of any function, in the global context, it refers to the global object. In browsers, the global object is “window”.<\/p>\n\n\n\n When “this” is used inside a regular function in JavaScript<\/a>, its value depends on how the function is called.<\/p>\n\n\n\n In a simple function call, this refers to the global object. Let us see about this with an example code:<\/p>\n\n\n\n When a function is called as a method of an object in JavaScript<\/a>, this refers to the object that owns the method.<\/p>\n\n\n\n When a function is used as a constructor with the new keyword, “this” refers to the newly created instance. Here is an example code to showcase this:<\/p>\n\n\n\n Arrow functions behave differently. They do not have their own “this” context; instead, they inherit this from the surrounding non-arrow function. The example below helps you understand more about the arrow functions<\/p>\n\n\n\n JavaScript provides methods to explicitly set the value of this: call(), apply(), and bind().<\/p>\n\n\n\n Both call() and apply() methods are used to call a function with a specified “this” value. The difference between them is that call() takes arguments separately, while apply() takes them as an array.<\/p>\n\n\n\n The bind() method creates a new function that, when called, has its this keyword set to the provided value. This is useful for creating functions with a specific “this” value.<\/p>\n\n\n\n We hope you understand the ways in which “this” keyword is used in JavaScript frameworks<\/a>. In case, you want to learn more about “this” and gain in-depth knowledge on full-stack development, consider enrolling for HCL GUVI’s certified Full-stack Development Course<\/a> that teaches you everything from scratch and make sure you master it!<\/p>\n\n\n\n In conclusion, understanding the “this” keyword in JavaScript is crucial for writing effective and bug-free code. By knowing how this behaves in different contexts, you can avoid common pitfalls and harness its power to create more dynamic and context-aware functions. <\/p>\n\n\n\n Whether you’re working with global context, object methods, constructors, or arrow functions, mastering this will significantly enhance your JavaScript skills.<\/p>\n","protected":false},"excerpt":{"rendered":" If you are starting out as a full-stack developer, you definitely come across one of the most popular languages which is JavaScript. There are various keywords like “this” keyword in JavaScript that play a vital role in backend development. In those JavaScript keywords, the this keyword is something that every developer should know! If you […]<\/p>\n","protected":false},"author":37,"featured_media":64314,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294,429],"tags":[],"views":"3600","authorinfo":{"name":"swathy s","url":"https:\/\/www.guvi.in\/blog\/author\/swathy-s\/"},"thumbnailURL":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2024\/09\/the_concept_of_this_keyword_in_javascript_1x-1-300x116.webp","jetpack_featured_media_url":"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2024\/09\/the_concept_of_this_keyword_in_javascript_1x-1.webp","_links":{"self":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/59319"}],"collection":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/comments?post=59319"}],"version-history":[{"count":11,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/59319\/revisions"}],"predecessor-version":[{"id":91169,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/posts\/59319\/revisions\/91169"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media\/64314"}],"wp:attachment":[{"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/media?parent=59319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/categories?post=59319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guvi.in\/blog\/wp-json\/wp\/v2\/tags?post=59319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}What is “this”?<\/strong><\/h3>\n\n\n\n
Global Context<\/strong><\/h3>\n\n\n\n
console.log(this); \/\/ window<\/code><\/strong><\/p>\n\n\n\nFunction Context<\/strong><\/h3>\n\n\n\n
\n
function showThis() {\n\n console.log(this);\n\n}\n\nshowThis(); \/\/ window<\/code><\/pre>\n\n\n\n\n
const obj = {\n\n name: 'John',\n\n greet: function() {\n\n console.log(this.name);\n\n }\n\n};\n\nobj.greet(); \/\/ John<\/code><\/pre>\n\n\n\n\n
function Person(name) {\n\n\u00a0\u00a0this.name = name;\n\n}\n\nconst person = new Person('HCL Guvi');\n\nconsole.log(person.name); \/\/ HCL Guvi<\/code><\/pre>\n\n\n\n\n
const obj = {\n\n\u00a0\u00a0name: 'HCL Guvi',\n\n\u00a0\u00a0greet: function() {\n\n\u00a0\u00a0\u00a0\u00a0const arrowFunction = () => console.log(this.name);\n\n\u00a0\u00a0\u00a0\u00a0arrowFunction();\n\n\u00a0\u00a0}\n\n};\n\nobj.greet(); \/\/ HCL Guvi<\/code><\/pre>\n\n\n\nExplicit Binding<\/strong><\/h3>\n\n\n\n
\n
function introduce(language) {\n\n console.log(`My name is ${this.name} and I speak ${language}.`);\n\n}\n\nconst person = { name: 'Carlos' };\n\nintroduce.call(person, 'Spanish'); \/\/ My name is Carlos and I speak Spanish.\n\nintroduce.apply(person, ['Spanish']); \/\/ My name is Carlos and I speak Spanish.<\/code><\/pre>\n\n\n\n\n
const person = { name: 'Diana' };\n\nfunction greet() {\n\n console.log(this.name);\n\n}\n\nconst boundGreet = greet.bind(person);\n\nboundGreet(); \/\/ Diana<\/code><\/pre>\n\n\n\nConclusion<\/strong><\/h2>\n\n\n\n