Rest и Spread в JavaScript. Возможности, о которых вы не знали.

Операторы Rest (остаток) и Spread (расширение) можно использовать не только для разделения и соединения отдельных значений массивов. Здесь я собрал 7 малоизвестных способов использования этих операторов.

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. Здесь мы исключаем password и собираем оставшиеся свойства в массив rest.

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

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

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

Функция removeProperty принимает в качестве аргумента prop. Используя вычисленные имена объектов, 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. Упорядочивание свойств.

Когда свойства не в том порядке, в котором нам нужно, мы можем упорядочить их, двигая свойство в начало или в конец списка.

Чтобы поднять id на первую позицию, добавьте id: undefined к новому объекту перед тем, как расширить object.

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 из object. Затем добавьте password после операции …object.

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

const organize = ({ password, ...object }) =>
({ ...object, password })
// --------
// /
// move password to last property

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

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, во время расширения объекта.

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

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

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

8. Бонус. Добавление условных свойств.

Вы можете также добавлять условные свойства. В этом примере, password будет добавлен только при истинности password.

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!' }

🙏 Спасибо за прочтение! 🙏

Надеюсь, эта статья была вам полезна. Если у вас есть вопросы или предложения, пожалуйста, оставляйте комментарии. Ваши отзывы помогают мне становиться лучше.

⚠️ Внимание! ⚠️

Если при чтении этой статьи вы обнаружите какие-либо ошибки в программном коде или грамматике, битые ссылки, пожалуйста, дайте мне знать. Заранее приношу извинения за возможные неудобства.