본문 바로가기
Programing/Javascript

JavaScript Computed Property

by 멍멍돌이야 2022. 6. 27.
반응형

JavaScript 계산 속성 소개

ES6에서는 괄호 안의 식을 사용할 수 있습니다.[]그런 다음 식 결과를 개체의 속성 이름으로 사용합니다.

예를 들어 다음과 같습니다.

let propName = 'c';

const rank = {
  a: 1,
  b: 2,
  [propName]: 3,
};

console.log(rank.c); // 3

이 예에서는[propName]의 계산 속성입니다.rank물건.속성명은 다음 값에서 파생됩니다.propName변수.

에 액세스 할 수 있는c의 특성rank오브젝트, JavaScript 평가propName속성 값을 반환합니다.

오브젝트 리터럴과 마찬가지로 클래스의 getter 및 setter에 대해 계산된 속성을 사용할 수 있습니다.

예를 들어 다음과 같습니다.

let name = 'fullName';

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get [name]() {
    return `${this.firstName} ${this.lastName}`;
  }
}

let person = new Person('John', 'Doe');
console.log(person.fullName);

출력:

John Doe​

구조:

그get[name]는, Getter 의 계산 속성명입니다.Personclass. 실행 시, 에 액세스 할 수 있습니다.

fullName속성, person 객체가 getter를 호출하고 전체 이름을 반환합니다.

728x90
반응형

댓글