JavaScript에서 클래스 객체의 값 변경 여부 확인 및 getter로 값 업데이트하기

JavaScript에서 클래스로 생성한 객체의 특정 속성 값이 변경되었는지 확인하고, 그에 따라 다른 값을 갱신해야 하는 경우가 있습니다. 이럴 때 활용할 수 있는 핵심 개념이 바로 getter, 즉 get 프로퍼티입니다. getter를 사용하면 속성에 접근하는 시점에 최신 값을 동적으로 반환받을 수 있어, 값의 변화를 손쉽게 추적할 수 있습니다.

예제 코드

아래 예제는 Student 클래스를 정의하고, getter를 통해 학생 점수(studentMarks)의 변경 여부를 확인하는 방법을 보여줍니다.

class Student{
    constructor(studentMarks1, studentMarks2){
        this.studentMarks1 = studentMarks1
        this.studentMarks2 = studentMarks2
        var alteredValue = this;
        this.getValues = {
            get studentMarks1() {
                return alteredValue.studentMarks1
            },
            get studentMarks2() {
                return alteredValue.studentMarks2
            }
        }
    }
}
var johnSmith = new Student(78,79)
console.log("증가시키기 전 결과=")
console.log("StudentMarks1="+johnSmith.studentMarks1,"StudentMarks2="+johnSmith.studentMarks2);
johnSmith.studentMarks2+=10;
console.log("studentMarks2에 10을 더한 후의 결과는 다음과 같습니다=")
console.log("StudentMarks1="+johnSmith.studentMarks1,
"StudentMarks2="+johnSmith.getValues.studentMarks2);

프로그램 실행 방법

위 프로그램을 실행하려면 터미널에서 다음 명령어를 입력합니다.

node fileName.js

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

실행 결과

프로그램을 실행하면 아래와 같은 출력 결과를 확인할 수 있습니다.

PS C:\Users\Amit\javascript-code> node demo200.js
증가시키기 전 결과=
StudentMarks1=78 StudentMarks2=79
studentMarks2에 10을 더한 후의 결과는 다음과 같습니다=
StudentMarks1=78 StudentMarks2=89

코드 설명

이 코드의 동작 원리를 살펴보면 다음과 같습니다.

1. 생성자 내부의 참조 저장: 생성자 안에서 var alteredValue = this;를 통해 현재 인스턴스 자신을 변수에 저장합니다. 이는 getter가 인스턴스의 최신 상태를 참조할 수 있도록 하기 위함입니다.

2. getter 정의: this.getValues 객체 안에 get 키워드로 studentMarks1과 studentMarks2에 대한 getter를 정의합니다. getter는 호출되는 순간 alteredValue, 즉 실제 인스턴스의 현재 값을 반환합니다.

3. 값 변경 후 확인: johnSmith.studentMarks2 += 10;으로 직접 속성 값을 변경한 뒤, johnSmith.getValues.studentMarks2에 접근하면 getter가 실행되어 변경된 최신 값인 89를 반환하게 됩니다.

이처럼 getter를 활용하면 객체의 속성 값이 언제 변경되었는지 감지하고, 변경된 값을 기반으로 필요한 로직을 수행할 수 있습니다. 값의 무결성을 유지하면서 동적으로 데이터를 조회해야 하는 상황에서 매우 유용한 패턴입니다.