Использование переменной как ключа в объекте JavaScript

Быстрый ответ

Если нужно динамически назначить ключ объекту в JavaScript, применяйте вычисляемые свойства с использованием квадратных скобок [ ]:

let propName = 'name';
let obj = {
  [propName]: 'Алиса' // Теперь всё стало ясно!
};

console.log(obj.name); // Выведет: 'Алиса'

Эта возможность представлена в ECMAScript 2015 (ES6) и позволяет создавать более гибкий код, что крайне полезно при работе с переменными данными.

ES6: Динамическое присвоение ключей свойствам объектов

До ES6

До появления ES6, чтоб использовать значение переменной как ключ, приходилось делать некоторые обходные пути:

var oldKey = 'oldSchool';
var oldObj = {};
oldObj[oldKey] = 'Неплохо!'; // Работает, но это выглядит устаревшим...

Подробнее об этом расскажет наш спикер на видео

Приветствуем ES6

ES6 представик вычисляемые свойства. Теперь можно задавать ключи свойств динамически прямо в объекте:

let dynamicKey = '.Dynamic';
let newObj = {
  [dynamicKey]: 'Теперь всё динамично!'
};

Выражение newObj['.Dynamic'] вернёт 'Теперь всё динамично!'. Это не чары, это новые возможности JavaScript!

Как можно задавать ключи свойствам

ES6 предлагает различные способы именования ключей:

• Строка: { "myKey": "Запомнил!" }
• Число: { 404: "Страница не найдена" } // Куда она подевалась?
• Идентификатор: { validIdentifier: "Всё в норме!" }
• Шаблонные строки: {[`Key_${expression}`]: "Великолепное сочетание!"}

Преимущества динамических ключей

Динамика в действии

Свойства с динамическими ключами особенно эффективно работают в функциях анимации, например, animate:

function animate(element, prop, value) {
    let animation = {
        [prop]: value // Значение 'value' определяет скорость
    };
    // А теперь начинается анимация...
}

Применение CSS "на лету"

Посмотрим на динамическое применение CSS свойств к DOM элементам:

let cssProperty = 'color';
let cssValue = 'red';

element.style[cssProperty] = cssValue; // И вуаля –  элемент стал красным!

Это делает пользовательский интерфейс более отзывчивым и адаптивным.

Визуализация

Отобразим на практике использование динамических ключей объектов:

У нас есть переменная: `keyName = "packageBox"`

Теперь нам нужно передать коробку её новому владельцу:

let packages = {
    [keyName]: "📦" // И вуаля – посылка в 'packageBox'!
};

Если проводить аналогию с доставкой:

Состояние коробок до: [📦, 📦, 📦]
Состояние коробок после:  [📦, 📦, 📦, packageBox📦]

Динамическая доставка – вы решаете, куда доставить посылку!

Полезные материалы

1. Инициализация объектов – JavaScript | MDN — Здесь вы найдёте все об вычисляемых свойствах.
2. ECMAScript 6: Новые возможности: Обзор и Сравнение — Углубитесь в детали вычисляемых свойств в ES6.
3. JavaScript For In — Познакомьтесь с использованием цикла for...in при работе с ключами объекта.
4. Синтаксис объектов в JavaScript — SitePoint: Расширьте свои знания в синтаксисе объектов JavaScript.
5. Методы объекта и "this" — Изучите, как правильно работать с this в контексте объектов.
6. Понимание объектов в JavaScript | DigitalOcean — Поймите глубже принципы работы динамического присваивания свойств и объектов.
7. JavaScript set object key by variable – Stack Overflow — Присоединяйтесь к обсуждению способов применения переменных как ключей в комьюнити Stack Overflow.