Learn Using Properties within Methods | Fundamentals of JavaScript Objects

Let's dive deeper into the usage of object methods and explore how methods use the this keyword to access object properties.

Access Object Properties in Methods

When we define a method within an object, we can access the object's properties using the this keyword. this refers to the object called the method, allowing us to interact with its properties. Let's illustrate this concept with an example:

const furniture = {
  type: "wardrobe",
  manufacturer: "Belgium",
  color: "wenge magic",
  getInfo() {
    console.log(this);
  },
};

// Method call
furniture.getInfo(); // Output: {type: 'wardrobe', manufacturer: 'Belgium', color: 'wenge magic', getInfo: ƒ}

In the getInfo method, this refers to the furniture object and represents the entire object's inner content.

Practical Example

In methods, we can access object properties through this and then use dot notation to access the specific properties as usual.

In the example below, the methods getColor, addProperty, and modifyProperty use this to access the furniture property and perform various operations.

getColor logs the wardrobe color to the console using this to refer to the object's properties;
addProperty adds new properties to the furniture object. It takes two parameters: propertyName (the name of the new property) and propertyValue (the value to assign to the new property);
modifyProperty changes the value of an existing property in the furniture object. It takes two parameters: propertyName (the property name to modify) and propertyValue (the new value to assign to the property).


              12345678910111213141516171819202122232425262728
            
const furniture = {
  type: "wardrobe",
  manufacturer: "Belgium",
  color: "wenge magic",

  getColor() {
    console.log(this.color);
  },

  addProperty(propertyName, propertyValue) {
    this[propertyName] = propertyValue;
  },

  modifyProperty(propertyName, propertyValue) {
    this[propertyName] = propertyValue;
  },
};

// Access the `color` property of the `furniture` and log it to the console.
furniture.getColor(); // Output: wenge magic

// Add a new property to the `furniture` object using the `addProperty` method.
furniture.addProperty("material", "wood");
console.log(furniture.material); // Output: wood

// Modify an existing property using the `modifyProperty` method.
furniture.modifyProperty("color", "oak");
console.log(furniture.color); // Output: oak

Note

Using the this keyword is essential in object methods. It ensures that the method works with the specific object that is called it, even if the name is unknown in advance. This avoids potential issues, such as copying methods from one object to another with a different name.

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 10

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain more about how the `this` keyword works in different contexts?

What happens if I call a method without using the object (e.g., assign it to a variable and call it)?

Can you show an example of copying a method to another object and how `this` behaves?

Awesome!

Completion rate improved to 2.27

Swipe to show menu

Let's dive deeper into the usage of object methods and explore how methods use the this keyword to access object properties.

Access Object Properties in Methods

const furniture = {
  type: "wardrobe",
  manufacturer: "Belgium",
  color: "wenge magic",
  getInfo() {
    console.log(this);
  },
};

// Method call
furniture.getInfo(); // Output: {type: 'wardrobe', manufacturer: 'Belgium', color: 'wenge magic', getInfo: ƒ}

In the getInfo method, this refers to the furniture object and represents the entire object's inner content.

Practical Example

In methods, we can access object properties through this and then use dot notation to access the specific properties as usual.

In the example below, the methods getColor, addProperty, and modifyProperty use this to access the furniture property and perform various operations.

getColor logs the wardrobe color to the console using this to refer to the object's properties;
addProperty adds new properties to the furniture object. It takes two parameters: propertyName (the name of the new property) and propertyValue (the value to assign to the new property);
modifyProperty changes the value of an existing property in the furniture object. It takes two parameters: propertyName (the property name to modify) and propertyValue (the new value to assign to the property).


              12345678910111213141516171819202122232425262728
            
const furniture = {
  type: "wardrobe",
  manufacturer: "Belgium",
  color: "wenge magic",

  getColor() {
    console.log(this.color);
  },

  addProperty(propertyName, propertyValue) {
    this[propertyName] = propertyValue;
  },

  modifyProperty(propertyName, propertyValue) {
    this[propertyName] = propertyValue;
  },
};

// Access the `color` property of the `furniture` and log it to the console.
furniture.getColor(); // Output: wenge magic

// Add a new property to the `furniture` object using the `addProperty` method.
furniture.addProperty("material", "wood");
console.log(furniture.material); // Output: wood

// Modify an existing property using the `modifyProperty` method.
furniture.modifyProperty("color", "oak");
console.log(furniture.color); // Output: oak

Note

Using the this keyword is essential in object methods. It ensures that the method works with the specific object that is called it, even if the name is unknown in advance. This avoids potential issues, such as copying methods from one object to another with a different name.

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 10

Using Properties within Methods

Access Object Properties in Methods

Practical Example

1. What does the `this` keyword refer to when used within a method of an object?

2. In the provided example below, what is the role of the `getFeastPrice` method in the `menu` object?

3. In the provided example below, how do you access the "cold appetizer" property of the `menu` object using `this`?

Awesome!

Using Properties within Methods

Access Object Properties in Methods

Practical Example

1. What does the `this` keyword refer to when used within a method of an object?

2. In the provided example below, what is the role of the `getFeastPrice` method in the `menu` object?

3. In the provided example below, how do you access the "cold appetizer" property of the `menu` object using `this`?

Using Properties within Methods

Access Object Properties in Methods

Practical Example

1. What does the this keyword refer to when used within a method of an object?

2. In the provided example below, what is the role of the getFeastPrice method in the menu object?

3. In the provided example below, how do you access the "cold appetizer" property of the menu object using this?

Awesome!

Using Properties within Methods

Access Object Properties in Methods

Practical Example

1. What does the this keyword refer to when used within a method of an object?

2. In the provided example below, what is the role of the getFeastPrice method in the menu object?

3. In the provided example below, how do you access the "cold appetizer" property of the menu object using this?

1. What does the `this` keyword refer to when used within a method of an object?

2. In the provided example below, what is the role of the `getFeastPrice` method in the `menu` object?

3. In the provided example below, how do you access the "cold appetizer" property of the `menu` object using `this`?

1. What does the `this` keyword refer to when used within a method of an object?

2. In the provided example below, what is the role of the `getFeastPrice` method in the `menu` object?

3. In the provided example below, how do you access the "cold appetizer" property of the `menu` object using `this`?