Understanding "this" in JavaScript objects and functions.

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;

    //varaible "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
    //varaible "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 explantion 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() excutes 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 varaible 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 varaible and the function is executed in the global scope (window), the varaible 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 varaible and the function is executed in the global scope (window), arrow functions normally resolve this to the global scope, the varaible 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.