Class Public & Private field MDN 내용 정리

원문 링크

👀 자바스크립트에서 class 문법에 public, private 필드를 적용하는 것은 표준 자바스크립트에 제안된, 아직은 실험적인 기능입니다.

Public fields

자바스크립트의 퍼블릭 필드는 외부에서 클래스로 접근이 가능하고 인스턴스로도 접근이 가능합니다.
크게 Public static field와 Public instance field로 나뉘어 볼 수 있습니다.

Public static field

• 클래스에서 생성하는 모든 인스턴스에 해당하는 필드가 아닌, 클래스마다 고정된 단 한 개의 필드가 존재하기를 원할 때 주로 사용합니다.

class Rabbit {
  static name = 'name is only value'
}

console.log(Rabbit.name) ✔
// expected output: "static field"​

1. static 키워드를 변수 앞에 써서 사용
2. 이 static 키워드를 가진 변수는 class가 생성될 때 constructor(생성자)에 추가됨
   -> 그렇기 때문에 클래스로 접근이 가능
3. static 키워드를 사용하는 변수에 초기값이 없다면 이 값은 undefined로 할당됨
4. static 키워드를 사용하는 변수는 자식 클래스에서 부모 클래스의 static 키워드 변수로 접근이 가능

class ParentClass {
  static baseField = 'base field' ✔
}

class ChildClass extends ParentClass {
  static subField = 'sub class field'
}

console.log(ChildClass.subField)
// expected output: "sub class field"

console.log(ChildClass.baseField) ✔ 자식 클래스에서 부모 클래스의 baseField 접근 가능!
// expected output: "base field"

Public instance field

• 클래스에서 파생된, 생성된 모든 인스턴스들에게 해당 필드가 존재하기를 원할 때 사용합니다.

class Rabbit {
 static name = 'name is only value'
 legs = 2 // 토끼 다리는 모두 2개이길 원한다
}

const instance = new Rabbit()
console.log(instance.legs)
// expected output: 2

1. 키워드 사용하지 않음
2. class가 생성될 때 Object.defineProperty()에 추가됨
   -> 클래스의 인스턴스에서 접근이 가능
3. 변수에 초기값이 없다면 이 값도 역시 undefined로 할당됨
4. 다른 속성값들 처럼 필드명이 computed 될 수 있다

const PREFIX = 'prefix'

class Rabbit {
    [`${PREFIX}Field`] = 'prefixed field'
}

const instance = new Rabbit()
console.log(instance.prefixField)
// expected output: "prefixed field"

5. 자식 클래스에서는 super를 이용해서 부모 클래스의 메서드에 접근

class Rabbit {
  leg = 2
  haveLegs() {
    return this.msg
  }
}

class childRabbit extends Rabbit {
  childHaveLegs() {
    return super.haveLegs()
  }
}

const instance = new childRabbit()
console.log(instance.childHaveLegs())
// expected output: 2

Private fields

자바스크립트의 프라이빗 필드는 외부에서 클래스로 접근이 불가능하고 인스턴스로도 접근이 불가능합니다.
크게 Private static field와 Private instance field로 나뉘어 볼 수 있습니다.

Private static field

• private static 키워드의 변수는 클래스가 선언된 내부의 생성자에서 접근이 가능
• private static 키워드의 변수는 클래스가 선언된 내부의 메서드에서 접근이 가능
• 따라서 private static 키워드를 가진 변수 접근은 내부에서만 클래스 자체 선언으로 접근이 가능

class Rabbit {
  private static age = 0
}

console.log(Rabbit.age) ❌
// expected output: roperty 'age' does not exist on type 'typeof Rabbit'

class Rabbit {
  private static age = 0;
  constructor() {
    Rabbit.age = 1; ⭕
  }
  run() {
   console.log(Rabbit.age); ⭕
  }
}

console.log(Rabbit.age); ❌
// Property 'age' is private and only accessible within class 'Rabbit'

Private instance field

• private 키워드의 변수는 내부 생성자에서 this로 접근이 가능
• private 키워드의 변수는 내부 메서드에서 this로 접근이 가능
• private 키워드의 변수는 클래스의 인스턴스에서 접근이 불가능하도록 캡슐화가 됨

class Rabbit {
  private age = 0;
  constructor() {
    this.age = 0;
  }
  run() {
    if (this.age > 15) {
      console.log('뛸 수 없습니다.');
    }
  }
}

const instance = new Rabbit();
instance.age === 0; ❌
// Property 'age' is private and only accessible within class 'Rabbit'