2024.01.16 TIL

getter setter에서 언더바 변수 사용 이해하기

//잘못된 코드
class user{
    constructor(firstName,lastName,age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    get age(){
        return this.age;
    }
    set age(value){
        this.age=value;
    }
}
const user1 = new user('steve','job',-1);
console.log(user1.age);

 

get과 set 메서드에서 동일한 이름의 변수를 사용하면서 발생하는 문제가 발생하는 이유

1. 생성자 호출:
   • const user1 = new User('steve', 'job', -1); 코드를 실행하여 User 클래스의 생성자가 호출된다.
   • 생성자 내부에서 this.age = age; 구문이 실행된다.
   • this.age를 통해 setter 메서드가 호출된다.
2. Setter 메서드 호출:
   • set age(value) 메서드가 실행된다.
   • this.age = value; 구문이 다시 this.age에 접근하면서 setter 메서드가 재귀적으로 호출된다.
   • 이 재귀 호출로 인해 무한 반복이 발생한다.

this.age로 프로퍼티에 접근하면 자기 자신을 호출하는 것이 아니라, 다시 setter를 호출하게 된다.

객체의 프로퍼티에 값을 할당할 때 = 연산자를 사용하면 해당 프로퍼티에 대한 setter 메서드가 자동으로 호출된다.

다시말해, 객체의 프로퍼티를 읽거나 쓸 때, 해당 프로퍼티에 대한 get 또는 set 메서드가 호출된다. 이때 this.age를 사용하면서 age 프로퍼티에 값을 할당하려 할 때 setter 메서드가 호출되는 것이다.

 

//수정한 코드
class User {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this._age = age; // _age라는 변수를 사용
    }

    get age() {
        console.log("Getter 호출");
        return this._age;
    }

    set age(value) {
        console.log("Setter 호출");
        this._age = value;
    }
}

const user1 = new User('Steve', 'Jobs', 30);

// 값을 읽을 때 get 메서드 호출
console.log(user1.age); // 출력: Getter 호출, 30

// 값을 쓸 때 set 메서드 호출
user1.age = 40; // 출력: Setter 호출
console.log(user1.age); // 출력: Getter 호출, 40