Understanding “this” in JavaScript

Having worked across sites raking in over 50 billion website visits annually with Higglo Digital I write about tech topics and teach…

Understanding “this” in JavaScript

Having worked across sites raking in over 50 billion website visits annually with Higglo Digital I write about tech topics and teach engineers to have solid foundations that will help them get ahead in their career. I also build awesome products for digital nomads — check it out!

JavaScript eBook

I’ve written an eBook on JavaScript that will take you from beginner to professional. Having been in your shoes moving to making over $200,000 per year in just a few years as a software engineer, I know exactly what it takes to get there. Check out the ebook now!

In JavaScript, the this keyword refers to the object that is currently executing the code. It can be used to refer to the object itself, or to access its properties and methods. One common use of this is to refer to the current object inside a method. For example:

console.log(`My name is ${this.name}`); ```javascript  }
 
}
 
obj.sayName(); // Output: "My name is My Object"In this example, the `sayName` method uses `this` to access the `name` property of the `obj` object.

Another common use of this is to bind a function to a specific object. This can be useful when passing a method as a callback, or when working with event handlers. For example:

console.log(`My name is ${this.name}`); ```javascript  }
 
}
 button.addEventListener('click', obj.sayName.bind(obj));In this example, the `sayName` method is bound to the `obj` object using the `bind` method. When the button is clicked, the `sayName`
It’s important to note that the value of `this` can change depending on how a function is called. In the examples above, `this` refers to the object that the function is a property of. However, if the function is called as a standalone function, `this` will refer to the global object (usually “window” in the browser). 
For example:
 
 javascript
console.log(`My name is ${this.name}`); ```javascript
}
 
 sayName: sayName
 
sayName(); // Output: "My name is undefined" (in the browser)In the second example, the `sayName` function is called directly, so `this` refers to the global object. To avoid this behavior, you can use the `bind` method, as shown in the previous example, or you can use the `call` or `apply` methods to specify the value of `this` when calling the function. 
For example:
 
 javascript
console.log(`${greeting} My name is ${this.name}`); ``` 
}
 
 
 
 
sayName.apply(obj, ['Hello']); // Output: "Hello My name is My Object"In these examples, the `call` and `apply` methods are used to specify the value of `this`” when calling the `sayName` function. The first argument to `call` or `apply` is the value of `this` that you want to use, and any additional arguments are passed to the function as normal.

JavaScript eBook

I founded Higglo Digital and we can help your business crush the web game with an award-winning website and cutting-edge digital strategy. If you want to see a beautifully designed website, check us out.

I also created Wanderlust Extension to discover the most beautiful places across the world with highly curated content. Check it out!

console.log(`My name is ${this.name}`); ```javascript } } obj.sayName(); // Output: "My name is My Object"In this example, the `sayName` method uses `this` to access the `name` property of the `obj` object.

console.log(`My name is ${this.name}`); ```javascript } } button.addEventListener('click', obj.sayName.bind(obj));In this example, the `sayName` method is bound to the `obj` object using the `bind` method. When the button is clicked, the `sayName` It’s important to note that the value of `this` can change depending on how a function is called. In the examples above, `this` refers to the object that the function is a property of. However, if the function is called as a standalone function, `this` will refer to the global object (usually “window” in the browser). For example: javascript console.log(`My name is ${this.name}`); ```javascript } sayName: sayName sayName(); // Output: "My name is undefined" (in the browser)In the second example, the `sayName` function is called directly, so `this` refers to the global object. To avoid this behavior, you can use the `bind` method, as shown in the previous example, or you can use the `call` or `apply` methods to specify the value of `this` when calling the function. For example: javascript console.log(`${greeting} My name is ${this.name}`); ``` } sayName.apply(obj, ['Hello']); // Output: "Hello My name is My Object"In these examples, the `call` and `apply` methods are used to specify the value of `this`” when calling the `sayName` function. The first argument to `call` or `apply` is the value of `this` that you want to use, and any additional arguments are passed to the function as normal.