Understanding "this" in JavaScript objects and functions.

posted Originally published at dev.to 3 min read

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.

If you read this far, tweet to the author to show them you care. Tweet a Thanks
Excellent breakdown of this! I’m curious, in your experience, do you find it more common to encounter issues with this in larger codebases or while working with frameworks like React? How do you usually handle these situations to avoid confusion?
I have surely encountered some issues while working with "this"  in large code bases and boy it can get messy.
I typically avoid using "this"  in arrow functions and try as much as possible to make my code unambiguous
Well explained, thank you

More Posts

Understanding Obfuscation In Javascript

Dhanush Nehru - Jan 12

A Practical guide to Async and Await for JavaScript Developers

Mubaraq Yusuf - Jan 8

The Magic of JavaScript Closures: A Clear and Easy Guide

Mubaraq Yusuf - Oct 15, 2024

Exploring Javascript Proxies and the Reflect API

Damien Cosset - Oct 9, 2024

Concept of Runtime Variables in JavaScript

Temi_lolu - Jan 2
chevron_left