The This Keyword in JavaScript

In this tutorial, I will cover the this keyword in JavaScript. Also explain the advantage of encapsulation in object-oriented programming.

Table of Contents

• Example 1: The functional approach
• Introduction to the this keyword
• Example 2: The object-oriented approach
• Advantages of encapsulation

Example 1 - The functional approach.

In this example, we have a person object and a separate getFullName function. This can be considered the functional approach to writing JavaScript code, as opposed to the object-oriented approach, which we will cover in the next example.

const person = {
  firstName: "John",
  lastName: "Doe",
};

const getFullName = (firstName, lastName) => {
  return `${firstName} ${lastName}`;
};

console.log(getFullName(person.firstName, person.lastName)); // Output: John Doe

In this approach, the getFullName function is defined outside of the person object, and we pass the firstName and lastName properties as arguments to the function. The this keyword is not used in this example, since the function is separate from the object.

Introduction to the this keyword

In JavaScript, the this keyword is used to refer to the context in which a function is called. The value of this depends on how the function is called, rather than where it is defined. When working with objects, the this keyword allows you to access the properties of the object within its methods.

Example 2 - Encapsulation and object methods. The object-oriented approach. Using the this keyword.

In this example, we include the getFullName function as a method within the person object:

const person = {
  firstName: "John",
  lastName: "Doe",
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(person.getFullName()); // Output: John Doe

In this approach, the getFullName method is defined within the person object, and we use the this keyword to access the firstName and lastName properties. This demonstrates the concept of encapsulation, where data (properties) and behavior (methods) are combined within the same object.

Advantages of encapsulation

Encapsulation is an essential concept in object-oriented programming, as it provides the following advantages:

• Organization: Encapsulation keeps related properties and methods together within the same object, making the code more organized and easier to understand.

• Maintenance: Encapsulating an object's data and behavior together makes it easier to update, debug, and maintain the code, since changes are localized within the object.

• Reusability: Encapsulating properties and methods within objects makes them more reusable, as you can create multiple instances of the same object with different data.

• Abstraction: Encapsulation allows you to hide the internal implementation details of an object, exposing only what is necessary for external usage. This simplifies the interaction between objects and reduces the potential for errors.

By using the this keyword and encapsulating properties and methods within objects, you can write cleaner, more organized, and maintainable code in JavaScript.