JS this keyword in object scope
In JavaScript, understanding the what, how and where of the this keyword can be the difference between writing code that actually works and tearing your hair out while you code.
The this keyword
In Javascript, this is a keyword (a reserved word), that is, it cannot be used as a variable name.
In JavaScript code, this is used to represent a scope. A scope, simply put, is a block of code that contains a line or lines of code. It can mean the entire code (global scope) or line(s) of code within curly braces {...}
var a = 1;
//variable "a" can be accessed any where within the global scope
function sayHello(){
var message = "Hello";
console.log(message);
};
//the variable "message" is not accessible in the global scope
//variable "a" can be accessed any where within the global scope
this in action
var a = 1;
console.log(this.a); // output is 1; this refers to the global scope here, the variable "a" is in the global scope.
function sayHello(){
var message = "Hello";
console.log(this.message);
};
sayHello(); // undefined
You might be wondering why the sayHello() function in the snippet above returned undefined, seeing that the this refers to the sayHello() function scope. Before you rush to say it is another of JavaScript's quirks. Let us dive into it.
var a = 1;
console.log(this.a); // output is 1; this refers to the global scope here, the variable "a" is in the global scope.
function sayHello(){
var message = "Hello";
console.log(this.message);
};
sayHello(); // undefined
The sayHello() function is executed in the global scope, meaning that the execution of sayHello() resolves this to the global scope (the window object; more like saying window.message). There is no variable named message in the global scope, so it returns undefined (You can try adding a variable named message to the global scope and see what happens.). A probable solution is shown below:
var person = {
message: "Hello",
sayHello: function(){
console.log(this.message);
}
};
person.sayHello(); // Hello
Here, the sayHello() function is a property in the person object, executing the function resolves this to the scope of the person object, rather than the window object. message is a variable (an object property) within the the person object, so it returns the value assigned to it.
While cases like the above may not be necessary in real-world scenarios, it is just a basic explanation to how this works under the hood.
Let us examine another example:
const obj = {
a: 1,
b: function() {
return this.a;
},
c: () => {
return this.a;
}
};
// Output 1: 1
console.log(obj.b());
// Output 2: undefined
console.log(obj.c());
const test = obj.b;
// Output 3: undefined
console.log(test());
const testArrow = obj.c;
// Output 4: undefined
console.log(testArrow());
Output 1
obj.b() executes the function and the this resolves to the obj object scope and returns the value of a
Output 2
Arrow functions resolve this to the global scope even when they are declared within an object. Here, this resolves to the global scope (window), the variable a does not exist in the global scope, so it returns undefined.
Output 3
obj.b returns a function from the obj object (it does not execute it; the parentheses in function calls signifies execution), the returned function is assigned to the test variable and the function is executed in the global scope (window), the variable a does not exist in the global scope, so it returns undefined.
Output 4
obj.c returns a function from the obj object (it does not execute it; the parentheses in function calls signifies execution), the returned function is assigned to the testArrow variable and the function is executed in the global scope (window), arrow functions normally resolve this to the global scope, the variable a does not exist in the global scope, so it returns undefined.
There you go folks. I hope you have understood the basics of how this works in JavaScript. No more using this in arrow functions, right? We should not also have sleepless nights as far as the usage of this is concerned in scopes.