접근제한자

접근제한자를 블로깅한 이유

• 유투브의 영상을 보며 영상 안에 코드를 보았는데, 코드 안에서
  보지 못했던 문법이 있어 검색하다보니 ES2019에 접근제한자 관련된 문법이 추가되었더라.
• 코드

class Cell {
  #cellElement; // 이렇게 해시를 붙여서 이 변수는 private다라고 선언
  #x;
  #y;
  #tile;
  constructor(cellElement, x, y) {
    this.#cellElement * cellElement;
    this.#x = x;
    this.#y = y;
  }
  get tile() {
    return this.#tile;
  }
}

접근제한자

• 다른 클래스에서 현재 클래스의 변수나 메서드의 접근 가능 여부를 선언하는 기법을 말함.
• 자바의 경우 변수나 메서드 앞에 public, protected, private을 키워드를 선언해서 쓰지만, 이전까지의 자바스크립트에선 따로 정의되어 있지 않았으나 '#'를 통해 선언 가능해짐
  - '#(해시)'는 키워드라고 안하고 프리픽스라고 하는 듯.
• 변수를 private으로 선언한 경우, 인스턴스를 생성했을 시 직접적으로 변수에 접근하지 못하고,
  클래스의 getter(),setter()를 통해 접근 가능하다.(자바의 경우)
• 자바에서의 접근제한자 사용법

public class Data {
  private String name = null;
  private String season = null;
  private int year = 0;
  
  public void setName(String name) {
    this.name = name;
  }
  
  public void setSeason(String season) {
  	this.season = season;
  }
  
  public void setYear(int year) {
  	if(year >= 20 && year <= 30) {
      this.year = year;
    } else {
      System.out.println("입력될 수 있는 나이는 20-30세 사이입니다.");	
    }
  }
  
  public String getName() {
  	return name;
  }
  
  public String getSeason() {
  	return season;
  }
  
  public int getYear() {
  	return year;
  }
}

자바스크립트의 접근제한자 사용법

• 예전의 경우: 모듈 패턴을 이용하거나 Symbol을 사용해서 private처럼 구현함.

// 모듈 패턴 
	function someModule() {
	  const privateProp = 'dont touch this';
      const publicProp = 'you can touch this';
      
      _doSomethingWithPrivateProp = () => {...}
      
      const publicMethod = () => {
        _doSomethingWithPrivateProp();
        //...
      }
      
      return {
        publicProp,
        publicMethod
      }
	}
      
      // Symbol
      const privateMethodName = Symbol();
      const pivatePropName = Symbol();
      
      class SomeClass {
        [privatePropName] = 'dont touch this';
      	publicProp = 'you can touch this';
      
      	[privateMethodName]() {
          console.log('priavte method');  
        }
        publicMethod() {
          this[privateMathodName](this[privateMethodName]);  
        }
      }

• ECMA2019에서 나온 '#'
  • 맨 처음 자바 코드를 '#' 프리픽스를 사용하여 자바스크립트 코드로 바꿔보기.

class Data {
  #name;
  #season;
  #year;
  constructor(name, season, year) {
    this.#name = name;
    this.#season = season;
    this.#year = year;
  }
  set setName(name) {
    this.#name = name;
  }
  
  set setSeason(season) {
  	this.#season = season;
  }
  
  set setYear(year) {
  	if(year >= 20 && year <= 30) {
      this.#year = year;
    } else {
      console.log("입력될 수 있는 나이는 20-30세 사이입니다.");	
    }
  }
  
  get getName() {
  	return this.#name;
  }
  
  get getSeason() {
  	return this.#season;
  }
  
  get getYear() {
  	return this.#year;
  }

  getData() {
    return `name: ${this.#name}, year: ${this.#year}, season: ${this.#season}` 
  }
}
const data = new Data('siwoo','spring', 23);
data.#name // Data 클래스의 name 변수는 # 프리픽스를 이용하여 은닉상태이기에 직접 접근은 불가능.
data.getData(); // 'name: siwoo, year: 22, season: spring'
data.setName = 'shu';
data.getName; // 'shu'

참고

• Private class fields[mdn]
• 은닉을 향한 자바스크립트의 여정(ToastUI)