Understanding this in JavaScript

66586

Concept of `this`

In simple terms, we can say this refers to an object, but that object will change according to the scope where this is called. For example, if we only call this in the global scope, we are going to obtain window[object: window]. But if we call this from inside an object, we are going to receive the object as answer

The object Window is the one that englobes everything in it. If we dig deeper into Window, we will see many Web API’s or methods that JavaScript has by default.

Creating a new object

However, this can change if it is called from inside an object.

console.log(this) // Windowlet person = {
    name: "Irving",
    lastName: "Juarez",
    showthis: function () {
        console.log(this)
    }
}

person.showthis()

If you look at the console on your browser, you will notice this has changed. That’s because this refers to the object where it is called from.

Use strict

It is importante to keep in mind this will refer only to an object, it doesn’t work with a function, for example.

let person = {
    name: "Irving",
    lastName: "Juarez",
    showthis: function () {
        console.log(this)
    }
}

person.showthis()

functiongreetings(){
    console.log(this)
}

greetings()

As you can see, this inside the function greetings returns Window. That’s because we are no inside an object, therefore, it’s similar to be in the global scope. However, if we want to keep our scope, we can use strict mode. We “active” that mode with the simple string "use strict";

let person = {
    name: "Irving",
    lastName: "Juarez",
    showthis: function () {
        console.log(this)
    }
}

person.showthis()

functiongreetings(){
    "use strict";
    console.log(this)
}

greetings()

If you run the above code, you will notice this inside the function greetings is undefined. That happens because inside the function there is any this already initialized.

In order to solve the problem of the this being undefined, there are some methods we can use to add a this value to a given function.
But,what if I just initialize this inside the function greetings? Well, that won’t work at all because this is a reserved word and cannot be initialized. If you want to try anyway, try with the following code

let person = {
    name: "Irving",
    lastName: "Juarez",
    showthis: function () {
        console.log(this)
    }
}

person.showthis()

functiongreetings(){
    "use strict";
    this = {
        nameFunction: "greetings"
    }
    console.log(this)
}

greetings()

The three methods to add a value to this are

Call
Apply
Bind

Call

With call we can pass as parameter the value of this to a function

let person = {
    name: "Irving",
    lastName: "Juarez",
    location: "Mexico"
}

functiongreetings(){
    console.log(`Hi, my name is ${this.name} and I live in ${this.location}`)
}

greetings.call(person)

As you can see, we created an object apart from the function and we merge them together with call. Therefore, in the greetings function we can access to this. But how can I pass parameters to my function? I mean, how can I do something like this 👇

functiongreetings(weight, height){
    console.log(`Hi, my name is ${this.name} and I weight ${weight} and I am ${height}m tall`)
}

Well, in that case, we first pass the value of this and then we start passing the ‘normal’ parameters, just like this

let person = {
    name: "Irving",
    lastName: "Juarez",
    location: "Mexico"
}

functiongreetings(weight, height){
    console.log(`Hi, my name is ${this.name} and I weight ${weight}kg and I am ${height}m tall`)
}

greetings.call(person, 60, 1.76)

Then, we got it.

Apply

Apply does exactly the same as Call, what’s the difference? Well, besides the name of the function, Apply uses an array to pass the parameters

let person = {
    name: "Irving",
    lastName: "Juarez",
    location: "Mexico"
}

functiongreetings(weight, height){
    console.log(`Hi, my name is ${this.name} and I weight ${weight}kg and I am ${height}m tall`)
}

greetings.apply(person, [60, 1.76])

As you can see, with Apply is virtually the same than with Call. So, which should I use? That will depend on the required parameters to pass to the function. If you are going to send <= 3 parameters, you can use Call comfortably. Otherwise, it is better the creation of an array and send it as the only parameter with Apply.

An example with Apply

let data = [60, 1.76, 20, "frontend engineer"]

let person = {
    name: "Irving",
    lastName: "Juarez",
    location: "Mexico"
}

functiongreetings(weight, height, age, jobTitle){
    console.log(`Hi, my name is ${this.name} and I weight ${weight}kg and I am ${height}m tall`)
}

greetings.apply(person, data)

Bind

Unlike the other two methods, bind creates a new function. This methods is used widely in the daily life of developers, mainly with classes and methods. How we would use Bind() is the following

let person = {
    name: "Irving",
    lastName: "Juarez",
    location: "Mexico"
}

functiongreetings(){
    console.log(`Hi, my name is ${this.name} and I live in ${this.location}`)
}

const personGreeting = greetings.bind(person)
personGreeting()