[JS] 객체의 프로퍼티-getter/setter

 

 

 

 

 

 

지금까지 객체의 프로퍼티(Property) 에 대해서 많은 언급을 했었다.

이번엔 객체의 프로퍼티 중에서도 접근자 프로퍼티를 조금 더 정리해보려고 한다. 

---

1. 프로퍼티란(Property) ?

사실 이름 그대로 프로퍼티는 ...  속성이란 뜻으로 자바스크립트에서 객체 내부의 속성을 의미한다.

즉 객체 내부의 {key:value} 형태로 구성되는 객체가 가지는 정보라고 말할 수 있겠다. 

 

프로퍼티는 크게 두가지로 분류할 수 있다. 

• 데이터 프로퍼티 (data property)
• 접근자 프로퍼티 (accessor property)

 

 

2. 데이터 프로퍼티 (data property)

데이터 프로퍼티는 일반적으로 사용하는 프로퍼티이다.

즉 일반적으로 값을 저장하기 위한 프로퍼티이다. 

여기서 Value 는 프로퍼티의 속성값을 말하며 단지 값을 의미하는 것일뿐 다른 기능은 없다. 

우리가 지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티이다. 

 

3. 접근자 프로퍼티 (accessor property) 

접근자 프로퍼티는 객체가 가진 프로퍼티의 값을 읽거나 쓸 때 호출하는 함수를, 값 대신에 지정할 수 있는 프로퍼티이다.즉, 접근자 프로퍼티는 실제로 값을 저장하지 않고, 특정 동작을 수행하거나 다른 속성의 값을 간접적으로 관리하도록 설계한다. 객체 리터럴 안에서 getter와 setter 메소드는 get과 set으로 나타낸다.

 

여기서 접근자 프로퍼티의 본질은 함수라서 이 함수는 값을 휙득(get) 하고 설정(set)하는 역할을 담당한다. 따라서 외부 코드에서는 함수가 아닌 그냥 일반적인 프로퍼티처럼 보인다. 

 

get 과 set 으로 객체의 속성값에 대한 접근 권한자 역할을 할 수 있다.

---

 

get과 set 메서드는 

특정 동작을 통해서만 접근하도록 하여 안전하게 접근할 수 있다. 

---

 

const user = {
    firstName: "hilong",
    position: "developer",
    
    get whoIsHer() {
        return `${this.firstName} ${this.position}`;
    }
};

console.log(user.whoIsHer);  
// "hilong developer"

 

4. get/ set 을 사용하여 private field 에 접근

https://khw063011.tistory.com/124

[JS] 접근제어자란?

 

바로 이전 포스팅에서 접근제어자 # 에 대해서 포스팅 했었다.

private 속성이기 때문에 외부에서 접근하지 못하도록 설정하는 역할을 했었는데,

 

안전하게 접근하여 사용하고 싶을 때 get, set 을 사용할 수 있다.

객체의 프로퍼티를 객체 외부에서 직접 조작하는 것은 (물론 가능하지만!) 데이터의 유지보수성을 해칠 수 있기 때문이다. 

즉, 외부에서는 비공개 속성에 직접 접근하지 못하지만 get 과 set을 통해 제어된 방식으로 접근할 수 있게끔 하는 것이다. 

get 메서드는 프로퍼티를 읽으려고 할 때 실행되고 set 메서드는 프로퍼티에 값을 할당하려고 할 때 실행된다. 

 

외부 코드에서는 접근자 프로퍼티를 일반 프로퍼티처럼 사용할 수 있다. 

접근자 프로퍼티를 사용하면 함수처럼 호출하지 않고 일반 프로퍼티에서 값에 접근하는 것처럼 . 표기법으로 프로퍼티값을 얻을 수 있는 것이다. 

 

class Person {
    // private 속성 선언
    #age = 0;
    
    constructor(name, age) {
        this.name = name;
        this.#age = age; 
        // 생성자에서만 #age에 직접 접근 가능 -외부에서는 접근 x
    }
    
    // get으로 나이를 조회하는 접근자 
    get age() {
        return this.#age;
    }
    
    // set으로 나이를 설정하는 접근자 (setter)
    set age(value) {
        if (value < 0) {
            console.log("나이는 0 이상이어야 합니다.");
        } else {
            this.#age = value;
        }
    }
}

const person = new Person("hilong", 80);
console.log(person.age);  // 80

person.age = -5;          // "나이는 0 이상이어야 합니다."
console.log(person.age);   // 30 (음수 값은 설정되지 않음)

person.age = 35;
console.log(person.age);   // 35 (정상적으로 값이 업데이트됨)