[JS] 63. Setter와 Getter

안녕하세요. 박기린 입니다.

 

Accessor Properties

JS의 모든 Object는 getter와 setter를 가질 수 있습니다. 이 둘은 함수이자, Object 내부의 값을 획득하거나 새로 지정하는 함수가 담긴 property입니다. 이를 Accessor property(접근자 프로퍼티-속성)라고 부릅니다.

 

 

 

---

Get and Set

const account = {
    owner: 'Jonas',
    movements: [200, 530, 120, 300],

    get latest() {
        return this.movements.slice(-1).pop();
    },

    set latest(mov) {
        this.movements.push(mov);  
    },
};

getter와 setter는 object 내에서 'get', 'set', 키워드와 함께 함수를 지정해줌으로써 선언할 수 있습니다.

그런데 object 내부에서 선언할 때는 함수 형식이지만, 외부에서 접근할 때는 메소드 함수가 아닌 property로 간주합니다.

 

 

 

 

 

---

Getter

// console.log(account.latest());
console.log(account.latest);

실행결과물

latest는 get 키워드와 함께 함수로 선언되었습니다. 하지만 (괄호)를 붙여서 메소드를 실행하는 방식으로 코드를 작성하면, TypeError가 발생합니다. 그리고 함수가 아니라는 메시지를 띄웁니다.

 

Getter는 object 내부에서 몇 가지 연산을 필요로 하는 값을, property처럼 읽고 싶을 때 사용합니다.

 

 

 

 

 

---

Setter

// account.latest(50);
account.latest = 50;

 Setter 함수를 선언할 때에는 정확히 하나의 매개변수를 필요로 합니다. (맨 상단의 코드 참고)

Setter 함수는 Getter함수를 통해 만들어진 가상의 property에  'account.latest = n'과 같이 새로운 값을 할당하고자 할 때, 어떤 방식으로 처리할 것인지를 지정해주는 함수입니다.

 

 

 

 

 

실행결과물

초기에 object를 선언할 때는 latest라는 property가 없었지만, Getter를 통해 latest를 정의하는 방식을 지정하고, Setter를 통해 latest의 값을 수정할 수 있습니다.

 

 

 

---

정리

get - 인수가 없는 함수로, get 함수의 이름과 똑같은 property를 만들고, 그 property를 읽는다.
set - 인수가 하나인 함수로, get 함수를 통해 만들어진 property에 새로운 값을 넣을 때 호출된다.

+) 이 둘은 하나만 단독으로 쓰이는 것이 가능하다.

 

 

 

 

 

---

응용

class Person {
    constructor(fullName, birthYear) {
        this.fullName = fullName;
        this.birthYear = birthYear;
    } 


{...}

    set fullName(name) {
        if(name.includes(' ')) this._fulltName = name;
        else alert(`${name} is not a full name!`);
    }

    get fullName() {
        return this._fullName;
    }
};

getter와 setter는 데이터 유효성 검사에도 사용할 수 있습니다.

get와 set은 가상의 property 뿐만 아니라 기존에 object 내에서 선언된 property에도 똑같이 사용할 수 있습니다.

object의 fullName property에 set 함수를 선언합니다. 그리고 set 함수가 받는 값에 띄어쓰기(' ')가 없는 경우, 풀 네임을 받는 것이 아니기에 경고를 표시하는 코드를 추가할 수 있습니다.