JavaScript This Keyword

JavaScript This Keyword refers to an object that is executing in the current code. Like the ‘window’ object executes in the global scope. Similarly, every function while executing has a reference to its current execution context, which can be referenced by ‘this’.

In most cases, the value of ‘this’ in JavaScript depends on how a function is called, potentially varying each time. Explore the intricacies of the ‘this’ keyword in JavaScript.

The value of ‘this’ also depends on whether we are working in the strict mode or not.

In Normal/Sloppy Mode

In the global execution context, ‘this’ refers to the global object as the function call is bound to the window object by default.

Inside a function, if the value of ‘this’ is not set by the call, then it will also default to ‘window’ object. Eg.,

function abc() {
console.log(this);
}
abc(); // Prints Window object

When an object has a function defined as a property to it, its ‘this’ refers to the object the method is called on. Eg.,

var obj = {
a: 25,
abc: function() {
return this.a;
}
}
console.log(obj.abc()); // Prints - 25

The result of the output won’t change even if the function is attached to the object afterwards the creation of the object. Let’s say that the object defined above has a nested object as –

obj.b = { bcd: function() { console.log(this.a); }, a: 35 };

Then, inside the nested object – ‘b’, ‘this’ will refer to the object ‘b’. So, if we do something like this –

console.log(obj.b.bcd()); // Prints - 35

Only the most immediate reference to the function call matters.

In Strict Mode

Strict mode puts a restriction on value of this, it will be undefined if in global context function is not bound to any object. Whereas in sloppy mode it was set to ‘window’ object.

Inside a function, if the value of ‘this’ is not set by the call, then it will be ‘undefined’. This happens because the function is called directly and not as a method( eg. window.abc() ). Here is an example below – Eg.,

function abc() {
console.log(this);
}
abc(); // Prints – undefined
window.abc() // Prints window object

The function of an object behaves in same way whether in the strict mode and or not.

Conclusion

In JavaScript, this keyword is a powerful feature that provides a reference to the object that is currently executing the code or the current execution context. Its value is dynamic and determined by how the function is called, and it can vary each time the function is called. Understanding the behavior of this is crucial for effective JavaScript programming, as it affects the context within which functions execute and how they access object properties.

In non-strict (sloppy) mode, this defaults to the global object (window in browsers) in the global execution context and within functions where its value isn’t explicitly set. When a function is a method of an object, this refers to the object the method is called on, allowing for object methods to access and manipulate the object’s properties.

In strict mode, JavaScript enforces a stricter set of rules on the value of this. If not bound to an object, this will be undefined in functions, even in the global context. This change emphasizes the importance of calling context and helps catch errors where this might not be what a programmer expects.

Frequently Asked Questions