The this keyword in JavaScript refers to the object that is currently executing the code. It holds the reference to a single object and represents the current execution context of the JavaScript program. Functions in JavaScript are essentially objects, which means they can be assigned to variables, passed to other functions, and returned from functions. Similar to objects, functions have their own properties.

The value of this can change depending on how a function is defined, how it is invoked, and the default execution context. When used inside a function, the this value will vary depending on the specific circumstances. It refers to different objects depending on how it is used.

The this keyword refers to different objects depending on how it is used:

• In an object method, this refers to the object.
• Alone, this refers to the global object.
• In a function, this refers to the global object.
• In a function, in strict mode, this is undefined.
• In an event, this refers to the element that received the event.
• Methods like call(), apply(), and bind() can refer this to any object.

Example

// Global Scope
console.log(this); // Output: Window (in browser) or global (in Node.js)

// Object Method
const myObject = {
  property: 'value',
  myMethod() {
    console.log(this.property);
  }
};

myObject.myMethod(); // Output: "value"

// Constructor Function
function MyClass(value) {
  this.property = value;
}

const myInstance = new MyClass('example');
console.log(myInstance.property); // Output: "example"

// Event Handlers
const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // Output: DOM button element
});

• In the global scope, this refers to the global object (Window in a browser or global in Node.js).
• Inside the myMethod method of the myObject object, this refers to the myObject object itself. Therefore, this.property accesses the property value of the object.
• In the constructor function MyClass, this refers to the newly created instance of the object when using the new keyword. The property value is assigned to the property property of the instance.
• Inside the event handler function assigned to the button’s click event, this refers to the DOM element representing the button that triggered the event.

Abhishek Singh

I’m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I’ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains:

• DevOps School – Tech blogs and tutorials

• Holiday Landmark – Travel stories and guides

• Stocks Mantra – Stock market strategies and tips

• My Medic Plus – Health and fitness guidance

• TrueReviewNow – Honest product reviews

• Wizbrand – SEO and digital tools for businesses

I’m also exploring the fascinating world of Quantum Computing.