Rest vs. Spread Syntax in JavaScript: Comparison and Differences
Tags: javascript, beginners, tutorial
Published: 2023-04-30 09:00:00

> Also available on my [blog](https://nikolasbarwicki.com/articles/rest-vs-spread-syntax-javascript-comparison-differences)

## 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and [Rest](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) 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

```javascript
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

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

### 3. Spreading strings

```javascript
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

```javascript
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

```javascript
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

```javascript
// 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

```javascript
// 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

```javascript
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.