How to edit values of an object inside an array in a class - JavaScript?

In JavaScript, you can edit values of objects inside an array within a class by using the this keyword. This allows you to reference and modify properties of objects stored in class arrays.

Understanding the Structure

When working with objects inside arrays in classes, each object can contain its own methods that modify its properties. The key is understanding how this refers to the current object context.

Example

Here's how to create a class with an array of objects and modify their values:

class Employee {
    constructor() {
        this.tempObject = [
            {
                firstName: "David",
                lastName: "Miller",
                setTheAnotherFirstName() {
                    this.firstName = "Carol";
                },
                updateLastName(newName) {
                    this.lastName = newName;
                }
            }
        ];
    }
}

var empObject = new Employee();
console.log("Original Name: " + empObject.tempObject[0].firstName + " " + empObject.tempObject[0].lastName);

// Modify using object's method
empObject.tempObject[0].setTheAnotherFirstName();
console.log("After method call: " + empObject.tempObject[0].firstName);

// Modify using parameterized method
empObject.tempObject[0].updateLastName("Johnson");
console.log("Final Name: " + empObject.tempObject[0].firstName + " " + empObject.tempObject[0].lastName);

Original Name: David Miller
After method call: Carol
Final Name: Carol Johnson

Alternative Approaches

You can also modify object properties directly without using object methods:

class Employee {
    constructor() {
        this.employees = [
            { name: "John", salary: 50000 },
            { name: "Jane", salary: 60000 }
        ];
    }
    
    updateSalary(index, newSalary) {
        if (this.employees[index]) {
            this.employees[index].salary = newSalary;
        }
    }
    
    updateName(index, newName) {
        if (this.employees[index]) {
            this.employees[index].name = newName;
        }
    }
}

var company = new Employee();
console.log("Before:", company.employees[0]);

// Direct property modification
company.employees[0].name = "Johnny";
company.employees[0].salary = 55000;
console.log("Direct modification:", company.employees[0]);

// Using class methods
company.updateSalary(1, 65000);
company.updateName(1, "Janet");
console.log("Method modification:", company.employees[1]);

Before: { name: 'John', salary: 50000 }
Direct modification: { name: 'Johnny', salary: 55000 }
Method modification: { name: 'Janet', salary: 65000 }

Key Points

• Use this keyword within object methods to reference the current object
• Access array objects using bracket notation: array[index].property
• You can modify properties directly or through dedicated methods
• Always check array bounds when accessing elements to avoid errors

Conclusion

Editing object values inside class arrays is straightforward using the this keyword and proper indexing. You can modify properties directly or create dedicated methods for better encapsulation and validation.