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

Inside a method, this allows us to read or update the object's properties.

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

this ensures the method always refers to the correct object, even if the method is reused or copied elsewhere.

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 how the `this` keyword works in different contexts?

What happens if I call one of these methods from outside the object?

Can you show more examples of using `this` in object methods?

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

Inside a method, this allows us to read or update the object's properties.

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

this ensures the method always refers to the correct object, even if the method is reused or copied elsewhere.

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`?

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?

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`?