It's something used all the time in Javascript, but often what it refers to is a mystery. In Javascript, works quite differently to other programming languages - and it works differently depending on if you are using use strict mode or not. this If you find it hard, you aren't alone. Let's look at exactly how this works, and remove any confusion as to what it means in various contexts. What is this in Javascript is a keyword in Javascript which refers to a property or set of properties within a certain context. The context we use this in alters its properties. In the global context, this refers to the global object - which in the browser is window, but is globalThis in Node.JS and other implementations of Javascript. this console.log(this); // The same as console.log(window); Outside of any functions or code, this is always the case. However, in different places, this means different things. This in Functions in Javascript In a function, this still refers to the global object. If we reference this in a function, it will by default, reference the window or globalThis object: console.log(this); // The same as console.log(window);

function myFunction() {
    console.log(this); // The same as console.log(window);
}

myFunction(); In strict mode, however, this inside a function is undefined. "use strict"
console.log(this); // The same as console.log(window);

function myFunction() {
    console.log(this); // This is undefined!
}

myFunction(); Solving with call() This is a little confusing at first, but the reason for this is because we need to add a this object onto myFunction - Javascript in strict mode won't default it to the global object. To do that, we have to use call(). In the example below, I've turned myObject into our this variable: "use strict"
console.log(this); // The same as console.log(window);

let myObject = {
    firstName: "John",
    lastName: "Doe",
    age: 76
}
function myFunction() {
    console.log(this.firstName);
}

myFunction.call(myObject); // this.firstName is defined as "John", so it will console log John
myFunction(); // this.firstName will be undefined, and this will throw an error. runs and attaches myObject to the keyword. If we don't use call, and simply run myFunction(), then the function will return an error, as this.firstName will be undefined. You are also able to call a function with an empty this, which you can then append data to inside your function. call() myFunction this This gives us a fresh space to define variables on our object, rather than being polluted with data from the global this object: this "use strict"
console.log(this); // The same as console.log(window);

function myFunction() {
    this.firstName = 'John';
    console.log(this.firstName); // This will be "John"
}

myFunction.call({}); Different behavior in strict mode As you can see, the behavior is quite different depending on if we're using strict mode or not - so it's important you do some tests before changing your code between the two modes. Call and Apply You may sometimes see being used interchangeably with a function called . Both of these functions are very similar, in that they both invoke a function with a specified this context. The only difference is takes an array if a function has arguments, while takes each argument one by one. call() apply() apply() call() For example: "use strict"
let otherNumbers = {
    a: 10,
    b: 4
}
function multiplyNumbers(x, y, z) {
    return this.a * this.b * x * y * z
}

// Both will return the same result, the only difference
// being that apply() uses an array for arguments.
multiplyNumbers.call(otherNumbers, 1, 2, 3);
multiplyNumbers.apply(otherNumbers, [ 1, 2, 3 ]); Simplifying this process using bind() Another way to achieve similar behaviour to is to use . Similar to , , changes the this value for a function, only it does so permanently. That means you don't have to constantly use - you only use it once. call() bind() call() bind() bind() Here is an example, where we bind our object permanently to our function, thus updating this permanently - we just have to define it as a new function. In the below example, we define a new function called boundFunction, which is our myFunction with myObject bound to it permanently. As such, when we call console log, it will show "John". This is different than call, which needs to be used each time we use a function. "use strict"
console.log(this); // The same as console.log(window);

let myObject = {
    firstName: "John",
    lastName: "Doe",
    age: 76
}
function myFunction() {
    console.log(this.firstName);
}

let boundFunction = myFunction.bind(myObject); // this will bind this to myObject permanently.
boundFunction(); // since we used bind, this will now be set to myObject, every time we call boundFunction() - so it will return John. Arrow Notation Functions and this One of the key features to the arrow notation functions in Javascript is they hold no this context. That means that they inherit this from their parent. For example, let's say we are in strict mode and define both an arrow function and a "normal" style function. For the arrow function, this will be inherited, but for the other function, this will remain undefined! "use strict"
console.log(this); // The same as console.log(window);

function myFunction() {
    console.log(this.name); // This will be "John"
    let myArrowFunction = () => {
        console.log(this.name); // This will be "John"
    }

    let myNormalFunction = function() {
        console.log(this.name); // This will throw an error, since this is undefined!
    }

    myArrowFunction();
    myNormalFunction();
}

myFunction.call({
    name: "John"
}); Constructor Functions and this Another interesting thing about this is that when used in a constructor function (that being a function using the new keyword), the return of the constructor function essentially overwrites this. So for example, if we run the following, although we set to John, the value returned for name is Jack: this.name let functionA = function() {
    this.name = "John";
}

let functionB = function() {
    this.name = "John";
    return {
        name: "Jack"
    }
}

let runFunctionA = new functionA();
console.log(runFunctionA.name); // Returns "John";
let runFunctionB = new functionB();
console.log(runFunctionB.name); // Returns "Jack"; This in an Object Context In an object context, using this refers to the object. For example, suppose we run a function within an object called obj, which refers to - this, in this case, refers to : this.aProperty obj let obj = {
    aProperty: 15,
    runFunction: function() {
        console.log(this.aProperty); // Refers to 15
    }
}

obj.runFunction(); // Will console log 15, since this refers to obj This is also true if you use the get()/set() notation: "use strict"
let obj = {
    aProperty: 15,
    runFunction: function() {
        console.log(this.aProperty); // Refers to 15
    },
    set updateProp(division) {
        this.aProperty = this.aProperty / division; // this.aProperty refers to 15
        console.log(this.aProperty); 
    }
}

obj.updateProp = 15; // Will divide aProperty by 15, and console log the result, i.e. 1 Using this with Event Listeners Another quirk of Javascript's this is that when using an event listener, this refers to the HTML element the event was added to. In the below example, we add a click event to an HTML tag with ID "hello-world": document.getElementById('hello-world').addEventListener('click', function(e) {
    console.log(this);
}); If we then click on our HTML element, we will see this in our console log: #hello-world <div id="hello-world"></div> Using this with Classes It's worth noting in this section, that classes in Javascript are simply functions under the hood. That means a lot of the functionality we've seen with functions stands true for classes. By default, a class will have this set to the class instance itself. In the below example, we can see this in action - both and runClass.whatsMyName return John. runClass.name class myClass { 
    whatsMyName() {
        return this.name;
    }
    get name() {
        return "John";
    }
}

const runClass = new myClass();
console.log(runClass.name);        // Returns "John"
console.log(runClass.whatsMyName); // Returns "John" The only exception to this, is that static items are not added to this. So if we define a function with the keyword static in front of it, it will not be on this: class myClass { 
    getMyAge() {
        return this.whatsMyAge();
    }
    static whatsMyAge() {
        return this.age; 
    }
    get name() {
        return "John";
    }
    get age() {
        return 143
    }
}

const runClass = new myClass();
console.log(runClass.whatsMyAge()); // Throws an error, since runClass.whatsMyAge() is undefined
console.log(runClass.getMyAge()); // Throws an error, since this.whatsMyAge() is undefined It's worth noting that classes, by default, are always in strict mode - so this will behave in the same way it does for strict functions by default in classes. Conclusion In Javascript, this can mean various things. In this article, we've covered what it means in different contexts - functions, classes, and objects. We have covered how to use , and to add a different context to your functions. bind() call() apply() We've also covered how to use this in strict mode, versus non-strict mode. After this, I hope is slightly demystified. this First Published here

The Complete Guide to Making Sense of Types in TypeScript

Exploring Javascript, CSS, and Paint Worklets: Why Put Javascript in Your CSS?

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

Understanding the Magic of 'this' in JavaScript

Understanding the Magic of 'this' in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

2 Quick and Easy Ways to Fix 'Uncaught SyntaxError: Cannot use import statement outside a module'

24 HTML Attributes You Want to Use ✨📚

8 CSS Properties to Know if You are a Beginner

8 iOS Courses That Will Take You From Newbie to Pro: 2020 Edition

A Beginner’s Guide to Trading on Gemini Exchange

Algorithms Explained: Recursion

2 Quick and Easy Ways to Fix 'Uncaught SyntaxError: Cannot use import statement outside a module'

24 HTML Attributes You Want to Use ✨📚

8 CSS Properties to Know if You are a Beginner

8 iOS Courses That Will Take You From Newbie to Pro: 2020 Edition

A Beginner’s Guide to Trading on Gemini Exchange

Algorithms Explained: Recursion

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps