JS_기본 문법 (26)_ 접근자 프로퍼티와 private필드

JS의 객체 프로퍼티 중 접근자 프로퍼티에 대해서 알아보자!

 

1. 접근자 프로퍼티

접근자 프로퍼티는 스스로 값을 갖지 않고

다른 프로퍼티의 값을 읽거나(get) 저장할 때(set) 사용한다.

 

다른 언어에서도 찾아볼 수 있고 getter함수, setter함수라고 부르기도 한다!

---

getter

- 반드시 값을 반환해야 한다.

- 특정 프로퍼티를 원하는 방식으로 가공하여 내보낼 때 사용한다.

setter

- 특정 프로퍼티에 값이 저장되는 방식을 조작하거나 제약사항을 적용할 때 사용한다.

- 하나의 인자를 받는다.

 

사용방법

방법 1) 객체 리터럴 방식

예시 1) 물체의 길이 단위 (인치와 센티미터)

const obj1 = {
  inch : 1,
  
  get cm() {
    return this.inch * 2.54;
  },
  
  set cm(temp) {
    this.inch = Number((temp * 0.393701).toFixed(2));
  }
}

값이나 참조값, 함수 등을 담는 데이터 프로퍼티 즉, 일반적인 프로퍼티와 다르게

get, set이 앞에 붙어있는 것이 바로 접근자 프로퍼티이다.

 

주의해야할 점은 함수의 생김새를 띄고 있지만

일반 프로퍼티처럼 사용해야한다는 점이다!

 

한 번 형태를 살펴보면

console.log(obj1)

이처럼 객체 안에 get, set이라는 키워드와 함께 존재하는 것을 볼 수 있다.

 

 

예시 1-1) getter함수

console.log(obj1.inch)
console.log(obj1.cm)


>>> 1
>>> 2.54

 

예시 1-2) setter 함수

// setter 함수 역시 프로퍼티처럼 사용
obj.cm = 20

console.log(obj1.inch)

>>> 7.87

getter와 setter함수는 접근자 "프로퍼티"이다.

따라서 위의 예시처럼 일반적인 프로퍼티와 동일한 형태로 사용하면된다.

 

 

방법 2) 클래스에서 사용

클래스에서도 접근자 프로퍼티를 사용할 수 있다.

역시 동일하게 get, set을 앞에 붙여서 정의한다.

class Player {
  constructor (name, job, power = 1){
    this.name = name;
    this.job = job;
    this.power = power;
  }
  get info() {
    return `이름 : ${this.name} | 직업군 : ${this.job}`;
  }
  set powerStat(powerStat) {
    if (typeof powerStat !== 'number') return;
    if (powerStat < 0) return;
    this.power = powerStat;
  }
}


const p1 = new Player('Kassid', '전사');

 

get 함수는 객체리터럴 방식과 동일하게 사용한다!

console.log(p1.info);

>>> 이름 : Kassid | 직업군 : 전사

 

set 함수는 할당받은 값의 처리 외에도 제약사항을 줄 때 사용할 수 있다.

 

예시 1) 정상적으로 할당한 경우

p1.powerStat = 10
console.log(p1);

>>> Player {name: 'Kassid', job: '전사', power: 10}

 

예시 2) 비정상적으로 할당한 경우 (제약사항 위반)

p1.powerStat = -1
console.log(p1);

>>> Player {name: 'Kassid', job: '전사', power: 10}

 

클래스 내의 setter함수에서 제약사항을 넣고

그것을 위반할 경우 return 하도록하였기 때문에

위의 예시에서 입력한 값이 할당되지 않음을 알 수 있다.

 

또한 getter 와 setter는 클래스에 존재할 경우

[[Prototype]]이 된다.

---

자 여기서 잠깐!
setter함수는 값을 할당할 때 사용하는데  실제 필드명과 동일하게 사용하면 안될까?

라는 생각을 하게 된다.

 

과연 가능할까?

 

필드명과 setter의 이름이 같은 경우

 

예시) 필드명과 setter명이 같은 클래스

class Player {
  constructor (name, job, power = 1){
    this.name = name;
    this.job = job;
    this.power = power;
  }
  get info() {
    return `이름 : ${this.name} | 직업군 : ${this.job} | 힘 : ${this.power}`;
  }
  set power(power) {
    this.power = power;
  }
}


const p1 = new Player('Kassid', '전사');

위와 같이 두 이름이 같은 클래스를 정의하였다.

 

하지만 이는 안타깝게도 두 이름을 식별하지 못하기 때문에 문제가 발생한다.

 

오류 발생 원인

① constructor의 "this.power"가 setter 함수를 호출한다.

② setter함수 내의 this.power가 setter 함수를 재귀호출한다.

③ 무한 반복 에러발생!

 

이러한 문제를 해결하기 위해서는 어떻게 해야할까?

 

해결책

이를 해결하기 위해서는 필드명과 setter 함수명을 다르게 해야한다.

하지만 사용자 입장에서는 동일하게 사용할 수 있는 함수를 만든다면

" _필드명 " 과 같은 형태를 이용해 구현할 수있다.

class Player {
  constructor (name, job, power = 1){
    this.name = name;
    this.job = job;
    this.power = power; //setter함수에 argument 할당
  }
  get info() {
    return `이름 : ${this.name} | 직업군 : ${this.job} | 힘 : ${this._power}`;
  }
  set power(power) {
    this._power = power; // 실제 필드명 _power에 값 저장
  }
}


const p1 = new Player('Kassid', '전사');

 

getter함수와 setter함수에 "_"를 붙인 _power를 제외하고 오류 예시와 모두 동일하다.

 

 

원리

constructor에서 setter함수에 받아온 argument를 할당하고,

setter함수 내에서 정의된 실제 필드명 "_power"에 값을 저장하는 원리이다. (당연히 임의로 작성된 필드명임)

실제 필드명 _power에 값이 저장된 모습

이러한 방식으로 자기반복호출을 방지하고

사용자의 입장에서 setter함수와 필드명을 동일하게 이용하는 것처럼 활용할 수 있다.

 

 

 

---

2. 은닉

객체지향의 주요 요소 중 하나는 '은닉'이다.

객체 내부의 값을 감춘다는 의미이고

인스턴스의 프로퍼티 값을 함부로 열람하거나 조작하지 못하도록 하기 위한 의도이다.

하지만 JS의 필드는 기본적으로 public이기 때문에 어디에서든 접근할 수 있다.

 

이를 해결하기 위해서 다른 언어에도 있는 개념인 private를 활용하면 필드를 은닉할 수 있다.

 

private필드

(현재 private는 아직 공식적으로 활용되지 않기때문에 일부 브라우저에서는 일부 기능이 제대로 수행되지 않는다ㅠ )

 

필드 명의 앞에 '#' 을 붙일 경우 private필드에 정의된다.

또한 constructor 내부가 아닌 클래스 바로 안쪽에 정의해야한다.

class Student {
  #name = '';
  #idNum = 0;
  constructor (name, idNum){
    this.#name = name;
    this.#idNum = idNum;
  }
}

const student1 = new Student('Kassid', 25);

 

console.log(student1.#name);

>>> SyntaxError: Cannot reference undeclared private names: "#name"

사파리 환경에서 확인

(크롬에서는 작성일 기준 접근 가능, 2023.4.10)

 

console.log(student1['#name']);

>>> undefined

 

이처럼 클래스 외부에서 private 필드에 접근하는 것이 불가능하다.

따라서 해당 필드에 대한 조작은 클래스 내부에서 이루어져야한다.

 

클래스 내부에서의 private필드 접근

class Student {
  #name = '';
  #idNum = 0;
  constructor (name, idNum){
    this.#name = name;
    this.#idNum = idNum;
  }
  
  get info (){
    return `이름 : ${this.#name} 번호 : ${this.#idNum}`
  }
  get idNum (){
    return this.#idNum;
  }
  set idNum (idNum){
    if (typeof idNum === 'number' && idNum > 0){
        this.#idNum = idNum;
    }
  }
}

const student1 = new Student('Kassid', 25);

 

student1.idNum = 10;
console.log(student1);

>>> Student {#name: 'Kassid', #idNum: 10}

 

constructor나 접근자 프로퍼티, 일반 함수 등

클래스 내부에서는 private 필드에 접근이 가능하다.

 

이러한 방식으로 인스턴스의 값에 바로 접근하는 것을 막기 위해서 이처럼 캡슐화를 하면된다!