Table of Contents

What is “THIS”?

In JavaScript,this keyword refers to the current context or scope within which code is executing. Its value is determined by how a function is called, and it can dynamically change depending on the invocation context.

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

When used within a method of an object, this points to that object.
When used by itself, this points to the global object.
Within a function, this typically points to the global object.
In a function under strict mode, this becomes undefined.
During an event, this points to the element that triggered the event.
Methods such as call(), apply(), and bind() can reassign this to any desired object.

Using “THIS” in a Method

In the context of an object method in JavaScript, the this keyword refers to the object itself, allowing access to its properties and methods within the method’s scope. It facilitates interaction with the object’s data and behavior, providing a way to access and manipulate its state.

Ex:

const person = {
name: 'John',
age: 30,
greet() {
	console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
}
};

person.greet(); // Output: Hello, my name is John and I am 30 years old.

const person = {

name: 'John',

age: 30,

greet() {

console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');

}

};

person.greet(); // Output: Hello, my name is John and I am 30 years old.

Output:

Hello, my name is John and I am 30 years old.

1	Hello, my name is John and I am 30 years old.

We have an object person with properties name and age, and a method greet().
Inside the greet() method, this.name refers to the name property of the person object, and this.age refers to the age property.
When we call person.greet(), this refers to the person object itself. So, this.name and this.age access the name and age properties of the person object, allowing us to log a personalized greeting message to the console.

Using “THIS” in a Function

In JavaScript, there are several different ways to invoke a function:

Function invocation
Method invocation
Constructor invocation
Indirect invocation
Arrow functions

Basic Function Invocation

this behaves differently in strict vs. non-strict mode.

Ex:

// Non-strict mode in browser, 'this' returns the global object.
function example() {
  console.log(this === window);
}

example();
// Output: true

// Non-strict mode in browser, 'this' returns the global object.

function example() {

console.log(this === window);

}

example();

// Output: true

// Strict mode in browser, 'this' is undefined.
function example() {
  console.log(this === undefined);
}

example();
// Output: true

// Strict mode in browser, 'this' is undefined.

function example() {

console.log(this === undefined);

}

example();

// Output: true

Method Invocation

this returns the object that is currently calling the function.

Ex:

const obj = {
  someValue: 100,
  someFunc: function () {
    return this.someValue;
  },
};

console.log(obj.someFunc());
// Output: 100

obj.someValue = 23;

console.log(obj.someFunc());
// Output: 23

const obj = {

someValue: 100,

someFunc: function () {

return this.someValue;

};

console.log(obj.someFunc());

// Output: 100

obj.someValue = 23;

console.log(obj.someFunc());

// Output: 23

Constructor Invocation

When the new keyword is used to create an instance of a function object, the function is used as a constructor.

Ex:

'this' will refer to the new object being created.
function Obj(value) {
  this.someValue = value;
}

let obj = new Obj(100);

console.log(obj.someValue);
// Output: 100

'this' will refer to the new object being created.

function Obj(value) {

this.someValue = value;

}

let obj = new Obj(100);

console.log(obj.someValue);

// Output: 100

Indirect Invocation

There are two methods of the Function type named .call() and .apply() which, like the .bind() method allows the this object to be set to a given object within a particular function. Unlike .bind() which returns a function, .call() and .apply() execute the function.

Ex:

function showProp(prefix) {
  console.log(prefix + this.someProperty;
}

let obj1 = {
  someProperty:23
};

let obj2 = {
  someProperty:37
};

showProp.call(obj1,"The property is");
// Output: The property is 23

showProp.call(obj2,"The property is");
// Output: The property is 37

// The .apply() method takes an array as its second argument

showProp.apply(obj1,["The property is"]);
// Output: The property is 23

showProp.apply(obj2,["The property is"]);
// Output: The property is 37

function showProp(prefix) {

console.log(prefix + this.someProperty;

}

let obj1 = {

someProperty:23

};

let obj2 = {

someProperty:37

};

showProp.call(obj1,"The property is");

// Output: The property is 23

showProp.call(obj2,"The property is");

// Output: The property is 37

// The .apply() method takes an array as its second argument

showProp.apply(obj1,["The property is"]);

// Output: The property is 23

showProp.apply(obj2,["The property is"]);

// Output: The property is 37

Arrow Functions

The this value within an arrow function is inherited from the containing function.

Ex:

// Using the global context
let someFunction = () => this;

console.log(someFunction() === window);
// Output: true

// Using the global context

let someFunction = () => this;

console.log(someFunction() === window);

// Output: true

// Using the constructor context
function Obj() {
  let someFunction = () => this;
  someFunction().someProperty = 25;
}

var o1 = new Obj();

console.log(obj.someProperty);
// Output = 25;

// Using the constructor context

function Obj() {

let someFunction = () => this;

someFunction().someProperty = 25;

}

var o1 = new Obj();

console.log(obj.someProperty);

// Output = 25;

Using “THIS” alone

The behavior of the this keyword depends on whether the code is running in strict mode or not.

Ex:

console.log(this);

1	console.log(this);

Output:

{}

{}

In non-strict mode, this refers to the global object (e.g., window in browsers, global in Node.js), representing the global scope.
In strict mode, this is undefined when used alone outside of any function or object context. This behavior prevents accidental use of the global object and encourages safer coding practices.