Сегодня хочу написать про одну из полезных фич, которая появилась в редакции ES6 Javascript, под названием 'вычисляемые свойства'. Идея заключается в том, что теперь в качестве ключа свойства в объекте можно использовать переменную.

Давайте разберем следующий пример.

Предположим, у нас есть функция, которая принимает 2 аргумента – ключ и значение. На выходе мы хотим получать готовый объект с принимаемым ключом и значением.

До появления вычисляемых свойств, нам сначала пришлось бы создать новый объект. После этого можно было бы использовать так называемую скобочную запись (bracket notation) для присвоения значения нашему ключу.

1function createObject(key, value) {
2  let newObject = {};
3  newObject[key] = value;
4  return newObject;
5}
6
7createObject('car', 'Audi');
8// получаем объект { car: 'Audi' }

После появления вычисляемых свойств появилась возможность использовать выражение (переменную) прямо внутри квадратных скобок. Это переменная будет использоваться в качестве ключа свойства. То есть теперь можно не создавать заранее новый объект.

1function createObject(key, value) {
2  return {
3    [key]: value,
4  };
5}
6
7createObject('car', 'Audi');
8// получаем объект { car: 'Audi' }

Используя вычисляемые свойства, мы можем производить с нашими ключами какие-либо действия. Например, давайте все символы ключа нашего свойства сделаем заглавными.

1function createObject(key, value) {
2  return {
3    [key.toUpperCase()]: value,
4  };
5}
6
7createObject('car', 'Audi');
8// { CAR: 'Audi' }

Пример из жизни

Последний раз я использовал вычисляемые свойства, когда требовалось сопоставить значения статусов, которые приходили из базы данных с их русскоязычным написанием, которое отображалось в интерфейсе.

1// 1. Создал переменную для каждого статуса
2const STATUS_BUSY = 'busy';
3const STATUS_READY = 'ready';
4
5// 2. Использовал вычисляемые свойства
6const STATUS_LABELS = {
7  [STATUS_BUSY]: 'Ожидает',
8  [STATUS_READY]: 'Готов',
9};
10
11// 3. Получил массив из БД
12const drivers = [
13  { name: 'Павел', status: 'busy' },
14  { name: 'Сергей', status: 'ready' },
15];
16
17// 4. Перевел статусы в нужный (человеческий) формат
18const driverStatuses = drivers.map((driver) => {
19  const { status } = driver;
20  return STATUS_LABELS[status];
21});
22console.log(driverStatuses);
23// Array [ "Ожидает", "Готов" ]