Search⌘ K
AI Features
Home
Courses
Step Up Your JS: A Comprehensive Guide to Intermediate JavaScript

The Utility of Rest & Spread

Explore how the rest and spread operators work with arrays, objects, and function parameters in JavaScript. Learn to create shallow copies, use advanced destructuring, and apply these operators to make your code cleaner and more efficient. Understand how default parameters and object destructuring integrate with rest to handle missing data gracefully.

We'll cover the following...

Array & Object Rest/Spread

... is called the rest operator and the spread operator, depending on its usage. It can spread items in an array out into another array. It can spread properties of an object into another object.

Array rest/spread was introduced in ES2015. Object rest/spread was introduced in 2017.

This lesson has been placed here because it ties in with the discussion of apply, call, and bind. Let’s dive in.

Spread

Node.js
const arr = [1, 2, 3, 4, 5];
const arr2 = ['abc', 'def', ...arr];
console.log(arr2); // -> [ 'abc', 'def', 1, 2, 3, 4, 5 ]
const obj = { item1: 'Hello', item2: 'there' };
const obj2 = { ...obj, item3: '!' };
console.log(obj2); // -> { item1: 'Hello', item2: 'there', item3: '!' }

... is spreading out an array into another array and an object into another object. This is useful for a number of things.

Copying Items

Copying an array or object is now as simple as using ....

Node.js
const arr = [1, 2, 3];
const arrCopy = [...arr];
const obj = { item: 'value' };
const objCopy = { ...obj };
console.log(arrCopy); // -> [ 1, 2, 3 ]
console.log(objCopy); // -> { item: 'value' }
...