Want to understand “this” keyword in JavaScript? Curious to know what is ‘this’ in JavaScript. Let’s explore this keyword in class and functional programming in JavaScript.

What is ‘this’ in JavaScript?

  1. The “this” keyword is a reserved keyword in JavaScript. Which means it cannot be used as identifiers (such as variable or function names).
  2. Secondly, the this keyword is not an object itself; rather, it refers to an object, and the object it refers to depends on the context in which it’s used. The value of this can change dynamically based on how a function is called or where it’s used.
  3. Finally, this allows you to access the properties and methods of the object to which it currently points.

Now that you have gained a theoretical understanding of the concept of ‘this’ in JavaScript.

Let us delve into practical coding examples to comprehend further the usage and significance of the ‘this’ keyword.

This keyword in JavaScript classes

In JavaScript, classes were introduced in ECMAScript 6 (ES6) to provide a more structured way to define object blueprints and create instances.

The “this” keyword plays a crucial role within classes.

Class Constructors and “this”

When you create a class, you typically define a constructor method.

The constructor is a special method that gets executed when you create a new instance of the class using the new keyword. Inside the constructor, “this” refers to the newly created instance.

class Person {
  constructor(name) {
    this.name = name;
  }
}

const person1 = new Person("Alice");
console.log(person1.name); // Outputs "Alice"

In this example, this.name refers to the “name” property of the “person1” instance.

Class Methods and “this”

Methods defined within a class also use “this” to refer to the instance on which they are called.

class Counter {
  constructor() {
    this.count = 0;
  }

  increment() {
    this.count++;
  }
}

const myCounter = new Counter();
myCounter.increment();
console.log(myCounter.count); // Outputs 1

In this case, the “increment” method uses “this” to access and modify the “count” property of the “myCounter” instance.

This keyword in JavaScript function

In regular JavaScript functions (non-arrow functions), the behavior of the “this” keyword can be a bit more complex.

Global Context

When “this” is used in a regular function that is not part of an object or class, it typically refers to the global object (e.g., window in a web browser or global in Node.js).

function globalContextExample() {
  console.log(this === window); // Outputs "true" in a browser environment
}

globalContextExample();

Function Methods and “this”

When a function is used as a method of an object, “this” refers to the object itself.

const person = {
  name: "John",
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // Outputs "Hello, my name is John"

In this case, “this” inside the “greet” method refers to the “person” object.

This keyword  in JavaScript Arrow function

Arrow functions introduced in ES6 have a different behavior regarding the “this” keyword compared to regular functions.

Lexical Scope

Arrow functions do not have their own “this” context. Instead, they inherit the “this” value from the surrounding code (lexical scope).

function exampleFunction() {
  const arrowFunction = () => {
    console.log(this === window);
  };

  arrowFunction();
}

exampleFunction(); // Outputs "true" in a browser environment

In this example, the “arrowFunction” inside “exampleFunction” inherits the “this” value from the global scope.

Arrow Functions in Objects

Arrow functions are often used in object literals for concise method definitions. However, they don’t have their own “this” context in this scenario either.

const person = {
  name: "Alice",
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // Outputs "Hello, my name is undefined"

In this case, the “this” inside the arrow function does not refer to the “person” object but retains its value from the surrounding scope, which is typically the global scope.

By understanding how the “this” keyword behaves in different contexts, you can effectively use it in your JavaScript code, whether you’re working with classes, regular functions, or arrow functions.

Hope you liked this article, on this keyword in JavaScript. If you are a learner and need JavaScript homework help then check out our service page.