JavaScript 'this' Keyword

In JavaScript, the 'this' keyword refers to the object that is executing the current function. The value of 'this' depends on how the function is called.

Global Context

In the global context (outside of any function), 'this' refers to the global object, which is window in browsers.

Try yourself 
        
            console.log(this); // In the browser, this refers to the window object

In this example, 'this' refers to the global object.

Function Context

Inside a function, the value of 'this' depends on how the function is called.

Simple Function Call
Try yourself 
        
            function showThis() {
    console.log(this); // In a regular function, this refers to the global object (window in browsers)
}
showThis();

In a simple function call, 'this' refers to the global object.

Method Call
Try yourself 
        
            const person = {
    name: "John",
    greet: function() {
        console.log(this); // In a method, this refers to the object the method is called on
        console.log(JSON.stringify(this)); // In a regular function, this refers to the global object (window in browsers), JSON.stringify converts it to a JSON string
    }
};
person.greet(); // Outputs the person object

When a function is called as a method of an object, 'this' refers to the object that the method is called on.

Constructor Call
Try yourself 
        
            function Person(name) {
    this.name = name;
}
const john = new Person("John");
console.log(john.name); // Outputs: John

When a function is used as a constructor with the new keyword, 'this' refers to the newly created instance.

Arrow Functions

Arrow functions have a lexical 'this', meaning they inherit 'this' from the parent scope.

Try yourself 
        
            const person = {
    name: "John",
    greet: function() {
        const innerGreet = () => {
            console.log(this.name); // Arrow function inherits this from the parent scope
        };
        innerGreet();
    }
};
person.greet(); // Outputs: John

In this example, 'this' inside the arrow function refers to the this value of the enclosing context.

Explicit Binding

The value of 'this' can be explicitly set using the call, apply, or bind methods.

Using call
Try yourself 
        
            function greet() {
    console.log("Hello, " + this.name);
}
const person = { name: "John" };
greet.call(person); // Outputs: Hello, John

The call method calls a function with a given 'this' value and arguments provided individually.

Using apply
Try yourself 
        
            function greet(age, city) {
    console.log("Hello, " + this.name + ". You are " + age + " years old and live in " + city);
}
const person = { name: "John" };
greet.apply(person, [30, "New York"]); // Outputs: Hello, John. You are 30 years old and live in New York

The apply method calls a function with a given 'this' value and arguments provided as an array.

Using bind
Try yourself 
        
            function greet() {
    console.log("Hello, " + this.name);
}
const person = { name: "John" };
const boundGreet = greet.bind(person);
boundGreet(); // Outputs: Hello, John

The bind method creates a new function that, when called, has its 'this' value set to the provided value.

Important Notes

Here are some important notes and best practices when working with the 'this' keyword in JavaScript:

Summary

Understanding the 'this' keyword is crucial for writing effective and bug-free JavaScript code. The value of 'this' varies depending on the context in which the function is called.