FRONTEND BLOG

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

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

На первый взгляд это кажется довольно сложной задачей, но нам на помощь придёт 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 🤖.