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 операторов. Если вы знаете еще какие-нибудь методы которые не перечислены в данном списке пожалуйста напишите о них в комментариях. Если данная статья вам оказалась полезна пожалуйста репостните её своим друзьям и знакомым.