this keyword in javascript

Introduction

Hello! Welcome to my blog!!!

In this article, we are exploring this keyword in JavaScript

The return value of this keyword in JavaScript is a source of confusion for many beginner JavaScript developers. Some avoid using it, while others push through and become better developers.

Keep in mind that the rules surrounding this are straightforward and at the end of this article you will be able to answer these questions:

what is this?
what does the value of this depend on?
what is the value of this?

Prerequisites

This article assumes the following:

Knowledge of JavaScript fundamentals
Functions and Variables
ES6

What is "this"?

this is a reserved keyword in javascript. this always refers to the object executing the current piece of code. It references the object executing the current function. it cannot be used as a variable.

this will always reference an object.

Non-Static Value

What does non-static mean?

Well, it means that in most cases the value of this is different depending on the scenario in which it's called. It doesn't assume a value like the way we think of variables such as var, const and let.

The value of this is determined by how a function is called. Speaking of calling functions, let's look at some popular ways we call functions.

Ways of calling functions are outlined below;

in a method
in a regular function
in an arrow function
in an event
outside a function

Inside a method

Methods are functions declared in an object.

Inside a method, this keyword references the object calling the method.

const person = {
  firstName: "samuel", 
  lastName: "olakada", 
  printThis () {
    console.log(this);
  }
}

person.printThis()
// output: Object { firstName: "samuel", lastName: "olakada", printName: printName() }

This is helpful, we apply this to several use cases. one is outlined below:

const person = {
  firstName: "samuel", 
  lastName: "olakada", 
  printName () {
    console.log(`My full name is ${this.firstName} ${this.lastName}`);
  }
};
person.printName();
// Output: My full name is samuel olakada

Inside a regular function

In a function created with the function keyword the value of this varies due to the use of strict mode "use strict".

Using "use strict", the value of this is undefined when called in a regular function.

"use strict"
function hello() {
    return this
};
hello(); // Output: undefined

Without strict mode, the value of this refers to the global window object.

function hello() {
    return this
};
hello(); // Output: window object (global object)

Inside an arrow function

The arrow function lacks its own this binding, therefore, the arrow function references this value of its parent object (it retains the value of the lexical contexts this).


const hello = () => {
    return this
};
hello();
// output: window object (global object)

Here, hello() retains the corresponding this value of the parent object, the parent element is the global window object.

The lack of this binding in arrow functions may prompt most developers to avoid using this keyword in arrow functions because of the uncertain complexities involved. There is one use case of this keyword in arrow functions.

"use strict"
const person = {
  firstName: "samuel", 
  lastName: "olakada", 
  printName () {
    // function to generate fullname
    function addName() {
        return this.firstName + ' ' + this.lastName
    }

    const fullName = addName()
    console.log(`My full name is ${fullName}`);
  }
};
// Output: Uncaught TypeError: can't access property "firstName", this is undefined

As the rules suggest, a regular function while in the strict mode will always return undefined and that results in an error when trying to read firstName from undefined.

it sounds unfair, right? our code looks so promising lol.

There's a solution, yes you guessed it, Arrow functions to the rescue. Arrow functions lack this binding, hence, retains this value of the nearest parent.

Enough talk, let me show you.

"use strict"
const person = {
  firstName: "samuel", 
  lastName: "olakada", 
  printName () {
    // function to generate fullname
    const addName = () => {
        return this.firstName + ' ' + this.lastName
    }

    const fullName = addName()
    console.log(`My full name is ${fullName}`);
  }
};
// Output: My full name is samuel olakada

In the printName method, the value of this is the person object. The arrow function just retains that value.

Conclusion

this keyword appears frequently in object-oriented programming, so it's crucial to understand how its value is assigned to stay away from sneaky bugs. I outlined the guidelines for determining this keyword's value in the article.

You can check out the MDN docs for more on this keyword.

Keshav's Blog has a good summary of it. I also love the article by Tech Girl Amaka

I'm curious to know what y'all think. Tell me in the comments section! Can't wait to hear what you think.

Samuel Olakada's Blog