Explained Simply: “This” Keyword in JavaScript

 

“This” in any programming language is a strange concept to understand due to the ambiguity of the definition.

Simply put, because This is used in many different ways it is difficult to precisely define. The best way to learn this is to learn the many different ways in which this can change.

1. Start with a simple console.log(this);

By a simple console.log, you can quickly tell gain understanding into what this is. \

console.log(this);

The This keyword is pointing to the global object. “This” is the “world” or the context of which this resides. Whenever you see the curly brackets {} in programming, that means the code residing in a different context. Without curly braces and logging console.log in the open, “This” is simply the global object. For a simple explanation of context, please check out my Youtube video.

2. Next, console.log(this) within a function

function show() {
   console.log(this === window); // true
}

show();

This is a tricky topic inside of functions (no pun intended). When functions are executed in the global scope, the value of this is the window object.

The above function was not executed inside of any other function or object, so by default show was called on the global object.

3. Next, console.log(this) within an object

let person = {
    name: "teddy",
    getName: function() {
        return this.name;
    }
}

console.log(person.getName()) // teddy

In the above example, the “this” object in getName references the person object.

let me = person.getname;
console.log(me()); // undefined

You get undefined instead of “teddy” because when you call a method without specifying its object, Javascript sets “this” to the global object.

let person = {
      name: 'teddy',
      getName: function() {
            return this.name;
      }
}

let teddy = {
      shirt: 'the eagles'
}

let shirt = person.getName.bind(teddy);

console.log(shirt());

4. Lastly, console.log(this) inside an arrow function.

ES6 introduced a new concept called the arrow function. In arrow functions, JavaScript sets the “this” lexically.

This means the arrow function does not create its own execution context, but inherits the “this” from the outer function.

let thisArrowFunction = () => this;
console.log(thisArrowFunction() === window); //true

In this example, there is no outer function so the execution content is the global object.