[TS] 접근 제한자(Access Modifier)에 대하여 알아보자

정(JJeong)·2023년 2월 2일
0

TypeScript 익히기

목록 보기
8/10
post-thumbnail

바로 직전 TS에서의 Class에 대해 알아보았는데 이때 접근 제한자에 대한 것이 나왔다.

그런데 이것의 성격에 대해서는 따로 분리해놓는게 가독성을 높일 것 같아 나눠 작성해본다.

📌 접근 제한자(Access modifier)

다른 객체지향언어에서는 지원하는 기능인 접근 제한자 기능을 ES6에서는 지원하지 않았으나, TS에서는 지원한다.

public

public은 자식 클래스 or 클래스 인스턴스에서 접근이 가능하다.

아무것도 작성하지 않았을 땐 기본적으로 모두 public이다.

class Car {
  name: string = "car";		// public name과 동일
  color: string;
  constructor (color: string) {
    this.color = color;
  }
  start() {
    console.log("start");
  }
}

class Bmw extends Car {
  constructor (color: string) {
    super(color);
  }
  showName() {
    console.log(super.name);
  }
}

const z4 = new Bmw("black");

위 예시 코드를 보면 Bmw클래스가 Car로부터 확장되었고, showName에서 super.name을 통해 Car클래스의 name에 접근했다.

이는 특별히 작성하지 않았어도 name이 public이기 때문에 자식 클래스에서 접근이 가능했던 것이다.



protected

class Car {
  protected name: string = "car";
  color: string;
  constructor (color: string) {
    this.color = color;
  }
  start() {
    console.log(this.name);
  }
}

class Bmw extends Car {
  constructor (color: string) {
    super(color);
  }
  showName() {
    console.log(super.name);	// 접근 가능(에러 안 남)
  }
}

public과 유사하게 protected에서도 자식 class의 접근에 문제가 없다.
차이는 인스턴스에서 발생한다.

위 코드를 작성하고 아래를 찍어보려 하면 에러가 뜬다.

const z4 = new Bmw("black");
console.log(z4.name);		// 에러 발생

이것이 protected와 public의 차이이다. protected는 자식 클래스의 접근은 허용하지만 클래스의 인스턴스에서의 접근은 불허한다.



private

반면 private을 사용하면 오직 해당 내부에서만 사용이 가능하다.

class Car {
  private name: string = "car";			// private으로 작성
  color: string;
  constructor (color: string) {
    this.color = color;
  }
  start() {
    console.log(`${this.name} "start"`);	// Car 내부에서만 사용
  }
}

class Bmw extends Car {
  constructor (color: string) {
    super(color);
  }
  showName() {
    console.log(super.name);	// 에러 발생
  }
}

#변수명 == private

이러한 기능은 #으로도 사용 가능하다. 이때는 사용할 때도 #을 붙여서 불러야 한다.

둘 중 아무거나 편한 것을 사용하면 된다.

class Car {
  #name: string = "car";			// #으로 작성
  color: string;
  constructor (color: string) {
    this.color = color;
  }
  start() {
    console.log(this.#name);		// 대신 사용할 때도 #을 붙여 사용
  }
}

class Bmw extends Car {
  constructor (color: string) {
    super(color);
  }
  showName() {
    console.log(super.#name);	// 에러 발생
  }
}

요약

  1. public : 자식 클래스, 클래스 인스턴스 모두 접근 가능
    • 작성 안한 것도 모두 public
  2. protected : 자식 클래스에서 접근 가능
  3. private : 해당 클래스 내부에서만 접근 가능
    • #변수명으로 대체 가능


profile
2년차 응애 FE 개발자입니다👶

0개의 댓글