JavaScript 클래스에서 배열 내부 객체의 값을 수정하는 방법

클래스 내부에 정의된 배열 안에 있는 객체의 속성값을 변경하려면 this 키워드를 활용하면 됩니다. 배열 요소로 저장된 객체에 메서드를 정의하고, 그 메서드 안에서 this를 사용하면 해당 객체 자신의 속성에 접근할 수 있습니다.

예제 코드

다음은 클래스 생성자에서 배열을 초기화하고, 배열 내부 객체의 메서드를 통해 firstName 값을 변경하는 예제입니다.

class Employee {
    constructor() {
        this.tempObject = [
            {
                firstName: "David",
                setTheAnotherFirstName() {
                    this.firstName = "Carol";
                },
            },
        ];
    }
} 
var empObject = new Employee(); 
empObject.tempObject[0].setTheAnotherFirstName(); 
console.log("변경된 이름은 = " + empObject.tempObject[0].firstName);

실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력합니다.

node fileName.js

여기서는 파일 이름이 demo220.js라고 가정하겠습니다.

출력 결과

실행 결과는 다음과 같습니다.

PS C:\Users\Amit\JavaScript-code> node demo220.js
변경된 이름은 = Carol

동작 원리

핵심은 this의 동작 방식입니다. setTheAnotherFirstName() 메서드는 배열의 첫 번째 객체(인덱스 0)에 직접 정의되어 있기 때문에, 이 메서드를 호출할 때 this는 해당 객체를 가리킵니다. 따라서 this.firstName = "Carol"; 코드는 Employee 인스턴스가 아닌, 배열 내부의 그 객체 자신의 firstName 속성을 변경하게 됩니다.

만약 화살표 함수(arrow function)를 사용했다면 this가 상위 스코프(클래스 인스턴스)를 가리키게 되어 의도한 대로 동작하지 않으므로 주의해야 합니다. 일반 함수 선언 방식으로 메서드를 정의해야 배열 내부 객체의 값을 올바르게 수정할 수 있습니다.