Извините за шквал собачек на изображении баннера. Я искал стоковое изображение на unsplash по запросу Мама называет щенков разного окраса. Я ищу самыми безвкусными способами 😃

Надеюсь, они скрасят и ваше время.

Недавно я обнаружил забавный синтаксис JS при просмотре пулреквеста от Sigo, коллеги. Я не использовал его ранее. Это выглядит так:

const dataFromAPI = 'age';

let existingObject = {
  name: 'John',
  [dataFromAPI]: 25
};

// Output {age: 25, name: "John"}

Удивительный!

Я искал переменные в ключах объектов и решил поделиться ими с вами.

Ключи и значения в объектах

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

// Creating an object literal with keys and values
let newObject = {
  name: 'Jane',
  age: 24
};

// Adding a new key - bracket notation
newObject["location"] = "Peru"

// Adding a new key - Dot notation
newObject.height = '1.95m'

// Output {age: 24, height: "1.95m", location: "peru", name: "Jane"}

Это довольно стандартные вещи. Для значений ключей мы можем назначать результаты сложных вычислительных операций в качестве значения. Для ключей мы можем сделать что-то подобное и даже запустить вычисление в ключе.

Ключи динамических объектов

Способ обработки динамических ключей в объектах до ES6 состоит в том, чтобы сделать что-то вроде:

let newObject = {
  name: 'Jane',
  age: 24
};

const newData = "location";

newObject[newData] = "Nicaragua"

// Output {age: "24", location: "Nicaragua", name: "Jane"}

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

const newData = "location";

let newObject = {
  name: 'Jane',
  age: 24,
  [newData]: "Nicaragua"
};

// Output {age: "24", location: "Nicaragua", name: "Jane"}

Хотя эта сокращенная форма предлагает более чистый код, этот сценарий применяется во многих случаях, когда существующие данные (объект) дополняются данными из другого источника с динамическим ключом.

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

const newData = "lottery";
const didUserWin = true;

let newObject = {
  name: 'Doug',
  age: 42,
  [newData + (didUserWin ? 'Winner': 'Loser')]: "Assign any value or data here"
};

// Output {age: "24", lotteryWinner: "Assign any value or data here", name: "Doug"}

На этом рисунке также показано использование условий в виде тернарных операторов.

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

Дайте мне знать, если у вас есть какие-либо отзывы об этом.

Вот бы стать лучше 🥂

Уильям.

Эта статья изначально была опубликована на Hackmamba.