Как задать имя ключа объекта через переменную в JavaScript?

Использование вычисляемых свойств (computed property names)

Ваша проблема решается с помощью синтаксиса вычисляемых свойств (computed property names), который появился в ES6 (ECMAScript 2015). Чтобы использовать значение переменной как имя ключа, нужно заключить имя переменной в квадратные скобки [] внутри литерала объекта.

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

let keyName = "userName";
let obj = { [keyName]: "John" };
console.log(obj); // { userName: "John" }

Квадратные скобки [] говорят JavaScript: "вычисли значение выражения внутри скобок и используй его как имя свойства". В нашем случае выражением является переменная keyName, её значение — строка "userName", поэтому ключом становится именно "userName".

Вы можете использовать любое выражение внутри скобок, не только переменную:

let prefix = "user";
let obj = {
  [prefix + "Name"]: "John",
  [prefix + "Age"]: 30
};
console.log(obj); // { userName: "John", userAge: 30 }

Почему ваш код не работает?

Когда вы пишете { keyName: "John" }, JavaScript интерпретирует это как создание свойства с именем keyName (строка), а не как использование переменной. В синтаксисе литерала объекта слева от двоеточия всегда ожидается статическое имя свойства, если не используются квадратные скобки.

Альтернативные способы

Если вы работаете со старым кодом (до ES6) или вам нужно добавить свойство позже, можно использовать:

1. Точечную нотацию — не подходит для динамических ключей, так как obj.keyName всегда обращается к свойству с именем "keyName".
2. Скобочную нотацию — универсальный способ:

let keyName = "userName";
let obj = {};
obj[keyName] = "John";
console.log(obj); // { userName: "John" }

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

Комбинирование со статическими свойствами

Вы можете смешивать вычисляемые и статические свойства в одном объекте:

let dynamicKey = "role";
let user = {
  name: "John",
  [dynamicKey]: "admin",
  age: 30
};
console.log(user); // { name: "John", role: "admin", age: 30 }

Важные моменты

• Выражение внутри скобок приводится к строке. Если передать число, оно станет строкой: { [1]: "value" } создаст свойство с ключом "1".
• Можно использовать вызовы функций: { [getKey()]: "value" }, где getKey() возвращает строку.
• Синтаксис работает не только в литералах объектов, но и в классах (для вычисляемых имён методов).

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

let keyName = "userName";
let value = "John";

// Через Object.assign()
let obj = Object.assign({}, { [keyName]: value });
console.log(obj); // { userName: "John" }

// Через spread-оператор (ES2018)
let obj2 = { ...{}, [keyName]: value };
console.log(obj2); // { userName: "John" }

let base = { id: 1 };
let dynamicKey = "email";
let full = { ...base, [dynamicKey]: "john@example.com" };
console.log(full); // { id: 1, email: "john@example.com" }