CODEGURU

Динамически добавляем поля в объекты

Довольно часто возникает ситуация, когда необходимо динамически добавить поле в объект. Тут важно понять суть задачи. Не значение поля менять динамически, а, в зависимости от какого-то условия, объект должен иметь или не иметь определённое поле.

На первый взгляд это кажется довольно сложной задачей, но нам на помощь придёт ES6 и оператор spread.

const condition = false;

const obj = {
  ...(condition ? {a: 1} : {}),
  b: 2
}

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

{
  a: 1,
  b: 2
}

А если условие не выполнено, то в оператор spread попадёт пустой объект и он ничего не вернёт. Поэтому итоговый объект будет таким:

{
  b: 2
}

Этот метод уже не раз выручал меня в рабочих проектах.

Кстати, оператор spread также может помочь и в случае, если вам нужно по условию добавить значения в массив.

const condition = false;

const arr = [
  ...(condition ? [a] : []),
  'b'
]

Вот такой вот полезный оператор spread 🤖.