Understanding ‘this’ Keyword in JavaScript

If you have been working with JavaScript, you must have definitely encountered the ‘this’ keyword. It is one of the important concepts for developers and quite tough for beginners. But once you learn how the ‘this’ keyword behaves in different contexts, it becomes easy for you to write efficient code without any errors. In this blog, you will learn everything about the ‘this’ keyword in JavaScript.

Table Of Contents

• What is ‘this’ in JavaScript?
• How ‘this’ Keyword work in Different Contexts?
  • 1. ‘this’ in the Global Context
  • 2. ‘this’ Keyword Inside an Object
  • 3. ‘this’ Inside an Arrow Function
  • 4. ‘this’ Inside Event Listeners
  • 5. ‘this’ Inside call(), apply() and bind()
• Best Practices
• Conclusion

What is this in JavaScript?

In JavaScript, the ‘this’ keyword refers to the object that is executing the function. It provides a way to access an object’s properties and methods (this.property_name). The value of ‘this’ keyword is determined when the function is called, not when it is defined.

How ‘this’ Keyword work in Different Contexts?

The ‘this’ keyword in JavaScript behaves differently in various contexts. Let’s discuss each of them one by one in detail:

1. ‘this’ in the Global Context

In the global scope, ‘this’ refers to the global object (window in browser and global in Node.js).

Example:

Output (In Node.js Compiler) :

Output: (In Browser Console):

Explanation: When you are printing the ‘this’ keyword in the global context, it gives you the global object (window in the browser console and global in Node.js).

2. ‘this’ Keyword Inside an Object

A function used inside an object refers to that object, and ‘this’ is known as implicit binding in JavaScript. 

Example:

Output:

Explanation: In this example, ‘this’ keyword is used inside a function, which is a part of an object in JavaScript. Thus, ‘this’ inside object returns the same object.

3. ‘this’ Inside an Arrow Function

Arrow functions offer short and concise syntax to write functions in JavaScript, it is a feature of came after ES6. Arrow functions do not have their own ‘this’. They inherit ‘this’ keyword value from their surrounding lexical scope, which means they refer to the objects that own the function, and this process is called Lexical Binding.

Example:

Output:

Explanation: In this example, Arrow functions are used, and these do not have their own ‘this’ value. They inherit it from their lexical scope. In this case, ‘this’ refers to the global object, so this.name is undefined.

4. ‘this’ Inside Event Listeners

In event listeners, ‘this’ keyword is used to refer to the element that calls or triggers the event.

Example:

Explanation: The Keyword ‘this’ inside event listeners is used to point to the element that executes the event. The first console.log(this) statement points to the button element, and the second console.log(this) statement points to the window object.

5. ‘this’ Inside call(), apply() and bind()

call(), apply(), and bind() are the utility functions that are commonly used with functions in JavaScript. You can manually set ‘this’ using call(), apply(), and bind().

Example:

Output:

Explanation: In this example, the call(), apply(), and bind() methods are used. It allows you to manually set the value of ‘this’ Keyword. The bind() method is special because it allows you a new function with a fixed ‘this’ value.

Best Practices

Here are some of the best practices that everyone has to follow while working with the keyword ‘this’ in JavaScript:

• Use arrow functions when you need ‘this’, to inherit from the surrounding scope.
• Use .bind() when passing object methods as callbacks.
• In strict mode (‘use strict’), JavaScript prevents ‘this’ from choosing the global object as the default. Thus, use strict mode to avoid global ‘this’ issues.

Conclusion

Understanding ‘this’ keyword in JavaScript is important for everyone, including beginners and developers, because it helps you to write clean and error-free code. The value of ‘this’ depends on how a function is called, not where it is defined. It behaves differently in the global scope, objects, classes, and event handlers. Learning about the working of the ‘this’ keyword in different contexts helps you to write efficient code.

Understanding ‘this’ Keyword in JavaScript – FAQs