클래스) 클래스 필드와 프라이빗 필드

선요약

• 클래스 필드는 클래스로 인스턴스를 만들때 모든 인스턴스가 사용할 수 있는 프로퍼티를 생성한다.
• 프라이빗 필드는 인스턴스에 프로퍼티를 만들어주나, 클래스 내에서만 수정이 가능한 프로퍼티를 생성한다. 
• 둘다 문법적 설탕의 개념이다.

---

클래스

class Player {
  numLives = 10
  #score = 0
  constructor(first, last) {
    this.#onNewbee()
    this.first = first
    this.last = last
  }

  setScore(newScore) {
    this.#score = newScore
  }

  getScore() {
    return this.#score
  }

  loseLife() {
    this.numLives -= 1
  }

  #onNewbee() {
    console.log("새 플레이어가 생성되었습니다.")
  }
}

위에 Player라는 클래스가 있다.

위 클래스로 Player 인스턴스를 찍어내면 first와 last, numLives와 #score 프로퍼티를 가진 인스턴스를 생성할 수 있다.

const player1 = new Player("Robert", "baratheon")
const player2 = new Player("Ned", "Stark")

console.log(player1)
console.log(player2)

• constructor 메서드는 인스턴스를 만들 때 꼭 한번 실행이 된다. 따라서 #onNewbee 메서드가 실행되었다.
• first와 last는 파라미터를 받아서 생성되었고, numLives와 #score는 class에 있는 그대로 생성되었다.

 

클래스 필드

이 때 해시태그(#)가 붙지 않은 클래스 내 프로퍼티는 클래스 필드라고 한다.

클래스필드는 각 인스턴스에서 수정 및 변형이 가능하게 된다.

위에서는 numLives가 클래스 필드라고 볼 수 있으며, 인스턴스 외부에서 접근해서 numLives를 강제로 조정할 수 있다.

인스턴스 내 프로퍼티를 강제로 바꿔버릴 수 있다.

numLives가 변경되어 버렸다.

 

프라이빗 필드

해시태그가 붙은 클래스 내 프로퍼티는 프라이빗 필드라고 하는데

클래스 내에서는 자유롭게 참조 및 변형이 가능하지만,

클래스 외부에서는 인스턴스에 접근하더라도 변형 및 참조가 불가능하게 된다.

이는 보안성과 연관이 있다.

 

프라이빗 필드에 접근하려고 하면 VSC에서부터 오류메시지를 띄운다.

오류 메세지를 번역하면 "프로퍼티 #score는 Player class 바깥에서 참조할 수 없으며, 이는 #score가 private identifier라서 그렇다." 라는 의미이다.

브라우저에서도 동일한 에러를 뿜는다.

 

 

따라서 프라이빗 필드를 수정하려면

class 내부에서 캡슐화를 시켜 프로퍼티를 수정해주어야 한다.

이 부분이다.

위 setScore 메서드를 통해 score를 수정할 수 있고, getScore를 통해 #score 값을 얻어낼 수 있다.

#score값을 class의 메서드를 이용하여 수정하였다.