JavaScript Spread and Rest Operators

JavaScript has two useful operators that look the same (...), but they do different things: the spread operator and the rest operator. Let's dive into what each operator does, how to use them, and the key differences between the two.

Introduction

• Spread Operator: Expands or "spreads" elements of an array or properties of an object.
• Rest Operator: Gathers multiple elements into a single array or object.

Both operators use the same syntax (...), but their functionality depends on how and where you use them.

What is a Spread Operator?

The spread operator (...) allows you to spread out the elements of an iterable (like an array or string) or the properties of an object. It is used to make copies of data or combine multiple data sources.

Spread Operator Use Cases

Combining Arrays

You can use the spread operator to merge two or more arrays.

const fruits = ['Apple', 'Banana'];
const vegetables = ['Carrot', 'Potato'];
const food = [...fruits, ...vegetables];
console.log(food); // Output: ['Apple', 'Banana', 'Carrot', 'Potato']

Passing Arguments to Functions

When you have an array of values and want to pass them as individual arguments to a function, the spread operator comes in handy.

function sum(a, b, c) {
    return a + b + c;
}
 
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // Output: 6

Merging Objects

You can combine multiple objects into one using the spread operator.

const person = { name: 'Alice', age: 25 };
const address = { city: 'Paris', country: 'France' };
const personWithAddress = { ...person, ...address };
console.log(personWithAddress); 
// Output: { name: 'Alice', age: 25, city: 'Paris', country: 'France' }

What is a Rest Operator?

The rest operator (...) collects multiple elements and packs them into a single array or object. It is mainly used in function parameters and destructuring assignments.

Rest Operator Use Cases

Handling Multiple Function Arguments

If you don't know how many arguments a function will receive, use the rest operator to handle them as an array.

// Concatenate all strings passed as arguments
function concatenateStrings(...strings) {
    return strings.join(' ');
}
 
console.log(concatenateStrings('Hello', 'world!')); // Output: "Hello world!"
console.log(concatenateStrings('JavaScript', 'is', 'fun', '!')); // Output: "JavaScript is fun !"
 
// or
 
function add(...numbers) {
    return numbers.reduce((sum, num) => sum + num, 0);
}
 
console.log(add(1, 2, 3)); // Output: 6
console.log(add(4, 5, 6, 7)); // Output: 22

Array Destructuring

The rest operator can gather remaining elements of an array into a new array.

const colors = ['red', 'blue', 'green', 'yellow'];
const [first, second, ...remainingColors] = colors;
console.log(first); // Output: red
console.log(second); // Output: blue
console.log(remainingColors); // Output: ['green', 'yellow']

Object Destructuring

Similarly, the rest operator can gather remaining properties of an object into a new object.

const book = { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925 };
const { title, ...details } = book;
console.log(title); // Output: The Great Gatsby
console.log(details); // Output: { author: 'F. Scott Fitzgerald', year: 1925 }

Difference Between Spread and Rest Operator in JavaScript

Summary

• Spread Operator: Use it to expand arrays or objects, combine arrays, or pass multiple arguments to a function.
• Rest Operator: Use it to gather multiple elements into a single array or object, or handle an unknown number of function arguments. Both operators make your JavaScript code more concise and readable by providing powerful ways to manipulate data structures.