Вычисляемые свойства JavaScript

В этом руководстве вы узнаете о вычисляемых свойствах JavaScript, представленных в ES6.

ES6 позволяет использовать выражение в квадратных скобках []. Затем он будет использовать результат выражения в качестве имени свойства объекта. Например:

let propName = 'c';
const rank = {
    a: 1,
    b: 2,
    [propName] : 3,
};
console.log(rank.c); // 3

В этом примере [propName] — это вычисляемое свойство объекта rank. Имя свойства получается из значения переменной propName.

Когда вы обращаетесь к свойству c объекта rank, 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);

Выход:

John Doe

Как это работает:

get[name] — это имя вычисляемого свойства геттера класса Person. Во время выполнения, когда вы обращаетесь к свойству fullName, объект person вызывает метод получения и возвращает полное имя.