private한 속성을 만들어보자.

IT공부중·2021년 2월 10일
0

JavsScript

목록 보기
16/22
post-custom-banner

예전엔 속성명에 _를 프리픽스 해서 사용했다고 한다. 하지만 private 하게 쓰자라는 컨벤션이지 private하지 않다. 그래서 이제 _는 거의 사용하지 않는다.

근본적으로 접근이 불가능한 private 속성을 만드는 방법으로는 클로저를 이용하는 방법이 있다.

클로저를 사용한 방법

function SomeModule() {
  const privateProp = 'dont touch this'; // 밖으로 return 하지 않는다.
  const publicProp = 'you can touch this'; // return 해준다.

  const doSomethingWithPrivateProp = () => { ... } /// return 해주지 않으므로 밖에서 사용이 불가능하다.

  const publicMethod = () => { // private 메소드를 public Method를 통해서만 사용할 수 있게 한다.
    doSomethingWithPrivateProp();
    // ...
  }

  return {
    publicProp,
    publicMethod
  }   
}

프로토타입 + 클로저 활용

비슷한 방법이지만 프로토타입에 private한 method를 넣는 방법이다. 즉시 실행함수를 사용한다.

const Person = (function () {
  function Person() {} // Person 생성자 함수.

  function right() { // private 한 메소드
    console.log('123');
  }

  Person.prototype.gg = function () { // public한 메소드에서 사용할 수 있다. private 메소드는 변경하거나 사용하지 못 한다.
    right();
  };

  return Person; // Person을 반환해준다.
})();

const p = new Person();
p.gg();

Symbol을 사용한 방법

const privateMethodName = Symbol();
const privatePropName = Symbol();

class SomeClass {
  [privatePropName] = 'dont touch this';;
  publicProp = 'you can touch this';

  [privateMethodName]() {
    console.log('private method');
  }

  publicMethod() {
    this[privateMethodName](this[privatePropName]);
  }
}

모듈 스코프 안에서는 Symbol을 사용할 수 있어 해당 필드나 메서드에 접근할 수 있지만, Symbol을 export 하지 않는 외부에서는 접근할 방법이 없다. 접근할 필드의 이름이 모르기 때문이다. 이 방법은 속성의 이름을 다른 차원으로 격리한 케이스이다.

Symbol은 export 하지 않고, class만 export 한다면 다른 곳에서는 접근하지 못 하는 private한 속성이 될 것이다.

class에 #을 이용한 방법

class의 속성들은 기본적으로 public 하고, class 외부에서 읽히고 수정될 수 있다. 하지만 ES2019에서

추가된 문법으로 # prefix을 붙여서 private으로 사용이 가능하다. 클래스 안에서만 사용 가능하며 외부에서 접근하려고 하면 error가 난다.

하지만 이 문법은 IE 뿐만 아니라 Firefox와 Safari에서도 지원 되지 않기 때문에 사용할 때 고려해야한다.

class ClassWithPrivateField {
  #privateField
}

class ClassWithPrivateMethod {
  #privateMethod() {
    return 'hello world'
  }
}

class ClassWithPrivateStaticField {
  static #PRIVATE_STATIC_FIELD
}

타입스크립트는 기본적으로 private, public을 지원한다. 타입스크립트를 사용하면 좀 더 객체지향적으로 사용할 수 있을 것 같다!

profile
4년차 프론트엔드 개발자 문건우입니다.
post-custom-banner

0개의 댓글