Rest vs. Spread Syntax in JavaScript: Comparison and Differences

Also available on my blog

Introduction

JavaScript has evolved tremendously since its inception, and the programming language continues to introduce new features and improvements to enhance the developer experience.

Two such features that have gained popularity among developers are the Spread and Rest syntax. Both are denoted by three dots ... and have distinct use cases, making them indispensable in modern JavaScript development.

Spread Syntax

The Spread syntax, introduced in ECMAScript 6 (ES6), allows the elements of an iterable (such as an array, string, or object) to expand in places where zero or more arguments (for function calls) or elements (for array literals) are expected. It essentially "spreads" the contents of the iterable.

Let's explore some examples:

1. Concatenating arrays

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const combinedArray = [...arr1, ...arr2]
console.log(combinedArray) // Output: [1, 2, 3, 4, 5, 6]

2. Copying arrays

const originalArray = [1, 2, 3]
const copiedArray = [...originalArray]
console.log(copiedArray) // Output: [1, 2, 3]

3. Spreading strings

const str = 'Hello'
const chars = [...str]
console.log(chars) // Output: ['H', 'e', 'l', 'l', 'o']

Rest Syntax

The Rest syntax, also introduced in ES6, collects multiple elements and condenses them into a single array or object. It is the opposite of the Spread syntax, as it "packs" elements together.

Rest syntax is commonly used in function parameters, allowing you to pass an indefinite number of arguments as an array.

Let's explore some examples:

1. Rest in function parameters

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0)
}

console.log(sum(1, 2, 3, 4, 5)) // Output: 15

2. Rest with destructuring

const [first, second, ...rest] = [1, 2, 3, 4, 5]
console.log(first) // Output: 1
console.log(second) // Output: 2
console.log(rest) // Output: [3, 4, 5]

Comparison

The primary difference between Spread and Rest syntax is their purpose. While Spread syntax "expands" an iterable into its individual elements, Rest syntax "collects" multiple elements and condenses them into a single array or object. Spread syntax is used for expanding iterables, while Rest syntax is primarily used in function parameters and destructuring assignments.

In the comparison section, let's show side-by-side examples of how the Spread and Rest syntax can be used in different scenarios.

Example 1: Combining arrays

// Using Spread syntax
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const combinedArray = [...arr1, ...arr2]
console.log(combinedArray) // Output: [1, 2, 3, 4, 5, 6]

// Using Rest syntax (in a function)
function combineArrays(...arrays) {
  return arrays.flat()
}
console.log(combineArrays(arr1, arr2)) // Output: [1, 2, 3, 4, 5, 6]

Example 2: Handling function arguments

// Using Spread syntax
function greet(firstName, lastName, age) {
  console.log(`Hello, ${firstName} ${lastName}! You are ${age} years old.`)
}

const person = ['John', 'Doe', 30]
greet(...person) // Output: "Hello, John Doe! You are 30 years old."

// Using Rest syntax
function greetWithRest(...person) {
  const [firstName, lastName, age] = person
  console.log(`Hello, ${firstName} ${lastName}! You are ${age} years old.`)
}

greetWithRest('John', 'Doe', 30) // Output: "Hello, John Doe! You are 30 years old."

Example 3: Destructuring assignments

const numbers = [1, 2, 3, 4, 5]

// Using Spread syntax
const [first, second, ...remaining] = numbers
console.log(first) // Output: 1
console.log(second) // Output: 2
console.log(remaining) // Output: [3, 4, 5]

// Using Rest syntax
function destructureWithRest(...args) {
  const [first, second, ...remaining] = args
  console.log(first) // Output: 1
  console.log(second) // Output: 2
  console.log(remaining) // Output: [3, 4, 5]
}
destructureWithRest(...numbers)

These examples should help clarify when to use Spread and Rest syntax. While both syntaxes use the same ... notation, their use cases and functionality differ. Spread syntax is useful for expanding iterables, while Rest syntax is ideal for condensing multiple elements into a single array or object.

Conclusion

Understanding the differences between Spread and Rest syntax and their respective use cases is essential for any JavaScript developer. By incorporating these powerful features into your code, you can improve the readability and maintainability of your projects. Remember to use Spread syntax when you want to expand an iterable into its individual elements, and Rest syntax when you need to condense multiple elements into a single array or object. With these tools in your arsenal, you'll be well-equipped to tackle a wide range of JavaScript challenges.