Nico Addai

One of the more difficult topics I’ve been learning about in OOP is the idea of execution context. I’ll start by illustrating an issue I got caught in.

// ChatGPT questions 
// Question 1: Create a Class
// Define a class called `Person` with properties `name` and `age`. 
// Create an instance of the class and set its properties. Then, write a 
// method within the class to display the person's information.

class Person {
    constructor(name, age) {
        this.name = name, 
        this.age = age; 
    }
}

Person.prototype.aboutMe =  () => {
    console.log(`My name is ${this.name} and 
    I am ${this.age}. `)
}

let Nico = new Person("Nico", 25); 

console.log(Nico.name) // Nico 
console.log(Nico.age) // 25

In this code snippet, I created a new class, Person with a constructor function for name and age. I then added the function `aboutMe` to its prototype chain as an arrow function.

This is important.

What would you expect to happen if I call Nico.aboutMe?

I expected that it would log My name is Nico and I am 25.

My code did not act the way I expected.

Instead it logged My name is undefined and I am undefined.

The issue in my code is because of execution context. Execution context is a concept that refers to the environment in which a function executes, or specifically in Javascript what is the current value of `this`.

A home for an execution

What is `this` you may ask? Every function executes within an object (Remember objects are the bread and butter of JS) in Javascript.

this the object in which a piece of code executes

this is pretty damn important!

It’s been a helpful mental model for me to think of execution context as where the function’s “home” is. Depending on where you are, whether in the global context or in a functional context, the variable available in scope change.

This is especially important when dealing with arrow functions like in the snippet above. For the aboutMe method inside the Person class, arrow functions have a different behavior for the this context compared to regular functions, which is causing the problem.

Arrow functions in my mental model are ‘open concept’ houses. Their context is based on the surrounding context, in this context the global object. It does not have its own this binding as it is an anonymous function (though the associated method is named aboutMe). In your code, when you use this.name and this.age inside the arrow function aboutMe, it refers to the this of the surrounding context global context, not the instance of the Person class.

How do you fix this?

Using a regular function expression for the aboutMe method will correctly bind this to the instance of the Person class:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

let Nico = new Person("Nico", 25);

   Person.prototype.aboutMe = function() {
        console.log(`My name is ${this.name} and I am ${this.age}.`);
    }

console.log(Nico.name);
console.log(Nico.age);

Nico.aboutMe();

OR

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    aboutMe() {
        console.log(`My name is ${this.name} and I am ${this.age}.`);
    }
}

let Nico = new Person("Nico", 25);

console.log(Nico.name);
console.log(Nico.age);

Nico.aboutMe();

By using a regular function expression for the aboutMe method, you set this‘s to the functional scope of the class, and the correct values of name and age will be accessed and displayed in the console.