Создание свойств объекта через переменные в JavaScript

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

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

let key = 'dynamicKey';
let obj = { [key]: 'value' };

console.log(obj.dynamicKey); // Вывод: 'value'

Добавление свойств объекта на лету

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

let myObj = {}; // Создаем новый объект
let propName = 'status';
let propValue = 'active';

myObj[propName] = propValue;
console.log(myObj[propName]); // Вывод: 'active'

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

Использование вычисляемых имен свойств

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

let dynamicKey = 'property_name';
let myObject = {
  [dynamicKey]: 'value'
};
// Современно и просто!

Такая схема упрощает код, делая его более сжатым и понятным, особенно когда создание объекта реализуется в одну строку.

Битва нотаций: точка против скобок

JavaScript предлагает две формы записи для доступа к свойствам объектов: через точку и с использованием скобок.

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

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

let myObj = {};
let propName = "Это не Спарта!";
myObj[propName] = 'Value'; // Нотация с скобками в действии!

Необычные способы решения

Если вас интересуют нетипичные методы, рассмотрите IIFE (немедленно вызываемые функциональные выражения) и использование запятой.

IIFE дают возможность определить свойство через функцию, которая будет выполнена сразу после её объявления:

let myObj = {
  prop: (function(a) { return a * 42; })(10)
};
// Свойство 'prop' равно 420, прекрасный результат!

Запятая может показаться необыкновенным инструментом, но она способна объединять несколько действий в одном месте:

let a = 'one', b = 'two', val1 = 42, val2 = 69, myObj = {};
(myObj[a] = val1, myObj[b] = val2);
// Устанавливаем значения 'one' и 'two' в объект myObj

"Магия" ES6

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

let a = 'Hello', b = 'World';
let myObj = {a, b};
console.log(myObj.b); // Вывод: 'World'

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

1. Работа с объектами – JavaScript | MDN – подробное руководство по объектам JavaScript.
2. Погружение в ECMAScript 6 | Leanpub – глубинное исследование нововведений в объектной модели ES6.
3. Спецификация языка ECMAScript® 2024 – официальные подробности инициализации объектов в ECMAScript.
4. Как в JavaScript задать ключ объекта из переменной – Stack Overflow – обсуждения и решения из профессионального сообщества по работе с динамическими ключами объекта.
5. 14. Объектно-ориентированные возможности за пределами классов – обзор свойств объектов и функциональности ООП в ES6.
6. Целостный справочник по объектам JavaScript – исчерпывающий справочник по объектам JavaScript от W3Schools.
7. Структуры данных: объекты и массивы :: Eloquent JavaScript – организация данных в JavaScript, включая использование объектов и массивов.