2.9 loperator spread and rest

After classes and arrow functions, let's look at two operators we will use constantly in modern JavaScript and in React: spread and rest. They share the same notation - three dots ... - but the role depends on where you use them. Spread expands the elements of an array or the properties of an object into another array or object. Rest does the opposite: it collects a variable list of arguments into a single array.

Spread for arrays and objects

To copy an array and add a few extra items, the spread operator is unbeatable: const newNumbers = [...oldNumbers, 4]; takes every element of oldNumbers, puts them in a fresh array, then appends 4. The same applies to objects: const newPerson = { ...person, age: 21 }; copies every property of person and adds (or overrides) age. If a key already exists, the rightmost value wins.

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4];
console.log(newNumbers);   // [1, 2, 3, 4]

const person = { name: "Matthieu" };
const newPerson = { ...person, age: 21 };
console.log(newPerson);    // { name: "Matthieu", age: 21 }

Rest in a function signature

In a function parameter list, the same three dots become the rest operator. const filter = (...args) => args.filter(el => el === 1); accepts any number of arguments and gathers them into a real array called args, on which you can call array methods like filter, map or reduce. With filter(1, 2, 3) the call returns [1]. These three dots will keep appearing in React when you forward props from one component to another, so make sure you can read both forms.

Summary

This lesson covers the spread and rest operators in JavaScript, both represented by three dots (...) but with different purposes. The spread operator expands array elements or object properties into a new collection, making it easy to copy and extend data structures. The rest operator collects multiple function arguments into an array, allowing flexible function parameters and enabling array methods to be applied to argument lists.

Key points

• The spread operator (...) extracts and spreads array elements or object properties into a new context
• The rest operator (...) in function parameters merges multiple arguments into a single array parameter
• Both use the same syntax (three dots) but serve different purposes depending on context
• Spread simplifies copying arrays and objects while adding new elements without manual repetition
• Rest parameters enable functions to accept a flexible number of arguments and treat them as array data
• Both operators are fundamental ES6+ features that simplify working with collections and function parameters

FAQ

What is the difference between spread and rest operators?

Both use three dots (...), but spread expands collections into individual elements (used in array/object literals), while rest collects multiple arguments into an array (used in function parameters). The context of use determines which operator is being applied.

How does the spread operator work with objects?

The spread operator extracts all key-value pairs from an existing object and adds them to a new object. If both objects have the same property, the newer property overwrites the old one, giving newer properties priority.

Why is the rest operator useful in functions?

The rest operator allows functions to accept any number of arguments without explicitly naming each one. The arguments are automatically collected into an array, enabling you to apply array methods like filter and map to the function parameters.