JavaScript에서 개인 필드 만들기

최근까지 JavaScript는 프로그래머가 개인 필드를 정의하는 방법을 제공하지 않았습니다.

A private field is a class property whose access is limited to within the class. These properties can not even be inherited by sub-classes.

비공개 필드를 상징화하려면 다음과 같이 작성해야 합니다.

class Employee {
  constructor(salary, age) {
    this._salary = salary;
    this._age = age;
  }
}

위의 코드 스니펫에서 '_' 및 salary 앞의 age는 다른 프로그래머에게 이러한 필드가 비공개이며 외부에서 액세스할 수 없음을 알리는 데 사용되었습니다.

기다리다! 외부에서 이 필드에 계속 액세스할 수 있습니다.

const employee = new Employee(20000, 35);
employee._salary;
// => 20000

employee._age;
// => 35

보시다시피 이 해결 방법은 _salary 및 _age의 동작을 변경하지 않습니다. 외부에서 계속 액세스하거나 수정할 수 있기 때문입니다.

간단히 말해서 _salary 및 _age는 여전히 공개적으로 액세스할 수 있습니다.😒

개인 필드

최근에 JavaScript는 개인 필드를 도입했습니다. 이제 우리는 비공개 필드를 간결하게 정의할 수 있으며 누군가 실수로 외부에서 액세스하고 수정하지 않도록 안심할 수 있습니다.

이것은 어떻게 생겼습니까?

비공개 필드를 정의하려면 다음과 같이 해야 합니다.

class Employee {
  // We must declare private fields before accessing them
  #salary;
  #age;

  constructor(salary, age) {
    this.#salary = salary;
    this.#age = age;
  }
}

예! 그렇게 간단합니다! #는 사유 재산임을 나타냅니다. _ 와 달리 # 는 salary 및 age 속성에 대한 외부 액세스를 제한합니다.

외부에서 이러한 속성에 액세스하려고 하면 undefined가 반환됩니다.

const employee = new Employee(20000, 35);
employee.#salary;
// => undefined

employee.#age;
// => undefined

오 좋다! 이제 의도한 동작을 달성했습니다.

내가 알아야 할 다른 사항은 무엇입니까?

음, # 연산자를 사용하여 개인 속성을 선언할 때 주의해야 할 몇 가지 사항이 있습니다.

아래 코드는 잘 작동하지만

class Employee {
  constructor(salary, age) {
    this._salary = salary;
    this._age = age;
  }
}

이 👇는 작동하지 않습니다:

class Employee {
  constructor(salary, age) {
    this.#salary = salary;
    this.#age = age;
  }
}

JavaScript에서 구문 오류가 발생합니다 👇👇

왜요?

#를 사용하여 속성을 정의하는 경우 해당 속성을 액세스하기 전에 선언해야 합니다.

즉, 공개 필드에 액세스하기 전에 반드시 선언해야 하는 것은 아니지만 비공개 필드에 액세스하기 전에 선언해야 합니다.

주요 테이크 아웃

비공개 필드는 외부에서 액세스할 수 없는 속성입니다.

JavaScript에서 비공개 필드는 속성 이름 바로 앞에 #를 추가하여 선언합니다(예: #privatePropertyName ).

외부에서 비공개 필드에 액세스하면 반환됨undefined

비공개 필드는 액세스하기 전에 선언해야 합니다.