JavaScript 計算プロパティ

概要: このチュートリアルでは、ES6で導入されたJavaScriptの計算プロパティについて学びます。

JavaScript 計算プロパティの概要

ES6では、ブラケット[]内で式を使用できます。すると、その式の評価結果がオブジェクトのプロパティ名として使用されます。例:

let propName = 'c';

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

console.log(rank.c); // 3
Code language: JavaScript (javascript)

この例では、[propName] は rank オブジェクトの計算プロパティです。プロパティ名は propName 変数の値から派生します。

rank オブジェクトの c プロパティにアクセスすると、JavaScript は propName を評価し、プロパティの値を返します。

オブジェクトリテラルと同様に、計算プロパティを ゲッターとセッター の クラスで使用できます。例:

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);Code language: JavaScript (javascript)

出力

John Doe

仕組み

get[name] は、Person クラスのゲッターの計算プロパティ名です。実行時に、fullName プロパティにアクセスすると、person オブジェクトはゲッターを呼び出し、フルネームを返します。

まとめ

• 計算プロパティを使用すると、式の値をオブジェクトのプロパティ名として使用できます。