this Keyword

`this` keyword and functions

The this keyword in JavaScript is a property of an execution context, whether it is global, function, or eval. For regular JavaScript functions, this could change based upon how they were called.

By itself, this refers to the global object.
The new object, when used in a constructor.
The base object, when the function enclosing, was called as a method of the object.
undefined in case of strict mode.
In an event, this refers to the element that received the event.

We have used this behavior for so long that most JavaScript developers are used to it. Let’s go over some examples:

By itself, `this` refers to the global object.

function foo() {
    return this;
};

console.log(foo()); // window object in a browser, global object for node execution

The new object, when used in a constructor.

function Order(main, side, dessert) {
    this.main = main;
    this.side = side;
    this.dessert = dessert;
    this.order = function () {
        return `I will have ${this.main} with ${this.side} and finish off with a ${this.dessert}`;
    }
}
const newOrder = new Order("sushi", "soup", "yogurt");

console.log(newOrder.order());
// I will have sushi with soup and finish off with a yogurt

The base object, when the function enclosing, was called as a method of the object

const myObject = {
    main: "butter chicken",
    side: "rice",
    dessert: "ice cream",
    order: function () {
        return `I will have ${this.main} with ${this.side} and finish off with ${this.dessert}`;
    }
}

console.log(myObject.order());
// I will have butter chicken with rice and finish off with ice cream

In the above example, this refers to myObject, and it can access the properties of the object.

`undefined` in case of strict mode

"use strict";
function foo() {
    return this;
};

console.log(foo() === undefined); // true

In an event, `this` refers to the element that received the event.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
</head>
<body>
    <button id="mybutton">
        Click me!
    </button>
    <script>
        var element = document.querySelector("#mybutton");
        element.addEventListener('click', function (event) {
            console.log(this); // Refers to the button clicked
            console.log(this.id); // mybutton
        }, false);
    </script>
</body>
</html>

We discussed arrow functions in the previous blog post and this keyword in the current one. The next blog post will combine arrow functions with this keyword to showcase how arrow functions behave differently than standard function expressions.

this keyword and functions

By itself, this refers to the global object.