[JavaScript] 접근자 프로퍼티

728x90

1. 접근자 프로퍼티

접근자 프로퍼티란 다른 언어에서도 말하는 getter, setter 함수를 의미합니다.

이 프로퍼티를 사용하면 함수를 사용한 것처럼 객체 내부의 프로퍼티를 제어가능합니다.

const person1 = {
  age: 17,

  get koreanAge () {
    return this.age + 1;
  },

  set koreanAge (krAge) {
    this.age = krAge - 1;
  }
}

//자동으로 get 실행됨
console.log(person1, person1.koreanAge); //18 -> 17+1

person1.koreanAge = 20; //set 실행됨 -> age = 20-1 = 19

console.log(person1, person1.koreanAge); //20 -> 19+1

이러한 접근자프로퍼티는 클래스에서도 사용가능합니다.

class PizzaShop {
  constructor (name, no) {
    this.name = name;
    this.no = no;
  }
  get chainTitle() {
    return `${this.no}호 ${this.name}점`;
  }
  set chainNo(chainNo) {
    if (typeof chainNo !== 'number') return; //파라미터가 숫자형이 아닐 경우 return(아래코드 적용안됨)
    if (chainNo <= 0) return; //파라미터가 0보다 작거나 같을 경우 retrun(아래코드 적용안됨)
    this.no = chainNo;
  }
}

const chain1 = new PizzaShop ('판교', 3);

console.log(chain1.chainTitle); //3호 판교점


chain1.chainNo = '4';
console.log(chain1); //PizzaShop {name: '판교', no: 3} ->문자열을 전달받았기 때문에 set에 적용안됨

chain1.chainNo = -1;
console.log(chain1); //PizzaShop {name: '판교', no: 3} ->0보다 작은값을 전달받았기 때문에 set에 적용안됨

chain1.chainNo = 4;
console.log(chain1); //PizzaShop {name: '판교', no: 4} -> 숫자형을 전달받았기 때문에 set 프로퍼티 실행됨

이 때 setter는 하나의 인자만 전달받기 때문에 주의해야합니다.

 

'JAVASCRIPT Programming > Javascript' 카테고리의 다른 글

[JavaScript] 스프레드와 디스트럭쳐링  (0) 2024.08.21
[JavaScript] 상속  (0) 2024.08.15
[JavaScript] 클래스  (0) 2024.08.11
[JavaScript] 객체  (0) 2024.08.06
[JavaScript] 일급 객체  (0) 2024.07.25