What is "this"?

What is "this"?

What is this in JavaScript?

In JavaScript, this is a keyword that refers to the object that owns the current execution context. In other words, this refers to the object that is calling the function in which this appears.

The value of this is determined by how the function is called, and it can be a bit confusing at first. There are four main ways in which this can be bound:

  1. Implicit binding: When a function is called as a method of an object, this is set to the object on which the method is called. For example:
const obj = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.greet(); // Output: "Hello, Alice!"

I apologize for the confusion. I will start again and include all of the different scenarios for the this keyword as you requested.

What is this in JavaScript?

In JavaScript, this is a keyword that refers to the object that owns the current execution context. In other words, this refers to the object that is calling the function in which this appears.

The value of this is determined by how the function is called, and it can be a bit confusing at first. There are four main ways in which this can be bound:

  1. Implicit binding: When a function is called as a method of an object, this is set to the object on which the method is called. For example:
const obj = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.greet(); // Output: "Hello, Alice!"

In this example, this is set to obj when the greet function is called a method of obj.

  1. Explicit binding: When you use the call, apply, or bind methods to call a function, you can specify the value of this explicitly. For example:
function greet(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}

const obj = { name: 'Alice' };

greet.call(obj, 'Hello'); // Output: "Hello, Alice!"
greet.apply(obj, ['Hi']); // Output: "Hi, Alice!"
const boundGreet = greet.bind(obj);
boundGreet('Greetings'); // Output: "Hola, Alice!"

In these examples, this is set to obj when the greet function is called with call, apply, or bind.

  1. New binding: When a function is called with the new operator, this is set to a new object that is created by the constructor function. For example:
function Person(name) {
  this.name = name;
}

const alice = new Person('Alice');
console.log(alice.name); // Output: "Alice"

In this example, this is set to the new Person object that is created when the Person function is called with new.

  1. Window binding: In the global scope (i.e., outside of any function), this is set to the global object (either window in a browser or global in Node.js). For example:
console.log(this === window); // Output: true (in a browser)

The this keyword in arrow functions

Arrow functions behave differently than regular functions when it comes to the this keyword. In an arrow function, this is lexically scoped, meaning that it is determined by the surrounding code, rather than by how the function is called.

Here is an example of how this works in an arrow function:

const obj = {
  name: 'Alice',
  greet: () => {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.greet(); // Output: "Hello, undefined!"

In this example, this is set to the global object (window in a browser)instead of obj, because the greet function is an arrow function and this is lexically scoped.

To access the name property of obj within the arrow function, you can either use a regular function instead of an arrow function, or you can use a closure to capture the value of this:

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.greet(); // Output: "Hello, Alice!"

const obj = {
  name: 'Alice',
  greet: () => {
    console.log(`Hello, ${obj.name}!`);
  }
};

obj.greet(); // Output: "Hello, Alice!"

The this keyword and object method shorthand

In modern JavaScript, you can use object method shorthand to define object methods more concisely. Instead of using the function keyword, you can use an arrow function directly.

For example, the following code defines an object with two methods using object method shorthand:

const obj = {
  name: 'Alice',
  greet: () => {
    console.log(`Hello, ${this.name}!`);
  },
  sayHi: () => console.log('Hi!')
};

obj.greet(); // Output: "Hello, undefined!"
obj.sayHi(); // Output: "Hi!"

As with regular arrow functions, the this keyword is exically scoped in object method shorthand, so it is not bound to the object on which the method is called. To access the object within the method, you can use a closure or a regular function instead of an arrow function.

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  },
  sayHi: function() {
    console.log('Hi!');
  }
};

obj.greet(); // Output: "Hello, Alice!"
obj.sayHi(); // Output: "Hi!"

The this keyword and object property value shorthand

In modern JavaScript, you can also use object property value shorthand to define object properties more concisely. Instead of using the function keyword and a property name, you can use a variable name as the property name.

For example, the following code defines an object with a method using object property value shorthand:

const name = 'Alice';
const obj = {
  name,
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.greet(); // Output: "Hello, Alice!"

In this example, the name property is defined using object property value shorthand, and the greet method is defined using object method shorthand.

Note that object property value shorthand does not affect the value of this within the object's methods. this is still bound to the object on which the method is called, as it is in regular functions.

Conclusion and further readings

The this keyword in JavaScript can be a bit confusing at first, but with practice and understanding of the different ways in which this can be bound, you will be able to use it effectively in your code. Remember that the value of this is determined by how the function is called, and that it can be bound implicitly, explicitly, with the new operator, or to the global object, depending on the context.

Arrow functions behave differently than regular functions when it comes to this, as this is lexically scoped in arrow functions rather than being determined by how the function is called.

In modern JavaScript, you can use object method shorthand and object property value shorthand to define object properties and methods more concisely. However, these shorthands do not affect the value of this within the object's methods.

https://javascript.info/object-methods

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

https://www.javascripttutorial.net/javascript-this/

Did you find this article valuable?

Support Divij Sehgal by becoming a sponsor. Any amount is appreciated!