7 трюков с Rest и Spread операторами при работе c JS объектами

Если вдруг кому интересно то я веду телеграм канал по фронтенду где выкладываю интересные статьи на разные темы а так же сам периодически пишу шорт-риды которые могут быть вам полезны. А теперь поехали!

---

Привет, Хабр! Представляю вашему вниманию перевод статьи «7 Tricks with Resting and Spreading JavaScript Objects» автора Joel Thoms.

Всем привет, на днях коллега по работе скинул мне ссылку на статью на английском языке в которой перечисляются разные методы работы с rest и spread операторами. Она оказалась мне полезна и я решил её перевести. Итак, начнем.



Rest и Spread операторы могут быть использованы не только для объединения аргументов в массив и объединения массивов.

В этой статье вы найдете 7 наименее известных трюков использования rest и spread операторов.

1. Добавление свойств

Клонирование объекта одновременно добавляя к новому объекту к клонированному объекту.
В примере снизу мы клонируем объект user и в клонированный объект userWithPass добавляем свойство password.

const user = { id: 100, name: 'Howard Moon'}
const userWithPass = { ...user, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon' }
userWithPass //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

2. Слияние объектов

Объкты part1 и part2 мержатся в объект user1

const part1 = { id: 100, name: 'Howard Moon' }
const part2 = { id: 100, password: 'Password!' }

const user1 = { ...part1, ...part2 }
//=> { id: 100, name: 'Howard Moon', password: 'Password!' }

Так-же объекты могут быть смержены используя такой синтаксис.

const partial = { id: 100, name: 'Howard Moon' }
const user = { ...partial, id: 100, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

3. Удаление свойства из объекта

Свойства из объекта могут быть удалены используя комбинацию деструктуризации и rest оператора. В примере ниже деструктуризуем объект rest и убираем из него свойство password.

const noPassword = ({ password, ...rest }) => rest
const user = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}

noPassword(user) //=> { id: 100, name: 'Howard moon' }

4. Динамическое удаление свойств

В примере снизу функция removeProperty принимает prop как аргумент. Используя переданное в аргументе название свойства мы динамически исключаем свойство из клонированного объекта.

const user1 = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
//                     ----       ------
//                          \   /
//                dynamic destructuring

const removePassword = removeProperty('password')
const removeId = removeProperty('id')

removePassword(user1) //=> { id: 100, name: 'Howard Moon' }
removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }

5. Организация или сортировка свойств по названию

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

const user3 = {
  password: 'Password!',
  name: 'Naboo',
  id: 300
}

const organize = object => ({ id: undefined, ...object })
//                            -------------
//                          /
//  move id to the first property

organize(user3)
//=> { id: 300, password: 'Password!', name: 'Naboo' }

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

6. Свойства по умолчанию

Свойства по умолчанию это свойства которые будут установлены в том случае если их нет в клонируемом объекте.

В примере снизу в объекте user2 отсутствует поле quotes. Функция setDefaults в случае отсутствия поля quotes устанавливает по умолчанию его со значением [].

После вызова функции setDefaults(user2) она возвращает нам свойство со значением quotes: []
При вызове setDefaults(user4) функция возвращает не модифицированное значение так как объект user4 уже имеет свойство quotes

const user2 = {
  id: 200,
  name: 'Vince Noir'
}

const user4 = {
  id: 400,
  name: 'Bollo',
  quotes: ["I've got a bad feeling about this..."]
}

const setDefaults = ({ quotes = [], ...object}) =>
  ({ ...object, quotes })

setDefaults(user2)
//=> { id: 200, name: 'Vince Noir', quotes: [] }

setDefaults(user4)
//=> {
//=>   id: 400,
//=>   name: 'Bollo',
//=>   quotes: ["I've got a bad feeling about this..."]
//=> }

Так-же это можно написать так если вы хотите что-бы значения по умолчанию отображались первыми:

const setDefaults = ({ ...object}) => ({ quotes: [], ...object })

7. Переименование свойств

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

Представьте что у нас есть объект со свойством ID написанное в верхнем регистре, а нам нужно переименовать в нижний. Начнем с удаления свойства ID из объекта. Затем добавим его назад с названием id в то время как объект клонируется.

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })

const user = {
  ID: 500,
  name: "Bob Fossil"
}

renamed(user) //=> { id: 500, name: 'Bob Fossil' }

8. Бонус. Добавление свойства в зависимости от условия

Спасибо @vinialbano за то что показал такой метод. В этом примере мы добавляем поле password только если password == true!

const user = { id: 100, name: 'Howard Moon' }
const password = 'Password!'
const userWithPassword = {
  ...user,
  id: 100,
  ...(password && { password })
}

userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

Вывод

Я постарался перечислить несколько менее известных методов использования rest и spread операторов. Если вы знаете еще какие-нибудь методы которые не перечислены в данном списке пожалуйста напишите о них в комментариях. Если данная статья вам оказалась полезна пожалуйста репостните её своим друзьям и знакомым.