Spread and Rest Operators in JavaScript
Tags: webdev, javascript, programming, frontend
Published: 2024-04-21 18:05:55

---
canonical_url: https://antondevtips.com/blog/spread-and-rest-operators-in-javascript
---

## Introduction

ECMAScript 2015 (ES6) has brought many features that have significantly improved the language's expressiveness, readability, and efficiency. 
Among these features, are **rest** and **spread** operators. 
In this blog post you will learn how to use spread and rest operators and how they can simplify your JavaScript code and make it more flexible.

## Understanding the Spread Operator

The syntax of **spread** operator is using three dots (**...**), and it allows to expand an array or object into its individual elements.

**Expanding arrays**
Imagine you have two arrays and you want to combine them into a single array. Before ES6, you might use the **concat** method:
```javascript
var fruits = ["apple", "orange"];
var moreFruits = ["cherry", "lemon"];
var allFruits = fruits.concat(moreFruits);
```

With the **spread** operator, this becomes much more intuitive and concise:
```javascript
var fruits = ["apple", "orange"];
var moreFruits = ["cherry", "lemon"];
const allFruits = [...fruits, ...moreFruits];
```


**Expanding objects**
ES 2018 extended the spread operator to objects, allowing for shallow-cloning and property merging:
```javascript
const user = { name: 'Anton', age: 30 };
const location = { country: 'Great Britain', city: 'London' };
const userProfile = { ...user, ...location };
```

**Expanding arrays into function arguments**
The spread operator can also be used to pass the elements of an array as arguments to a function:
```javascript
function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers));
// Output: 6
```

## Understanding the Rest Operator
While the **spread** operator expands an array or object into its individual elements, the **rest** operator does the opposite, collecting multiple elements or properties into a single array or object. 
It's used in function parameters and destructuring assignments.

The syntax of **rest** operator is using three dots (**...**), actually the same as **spread** operator.

**Functions with Variable Arguments**
The rest operator can be used to gather any number of arguments into an array:
```javascript
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2, 3, 4));
// Output: 10
```

**Destructuring Assignments**
In destructuring assignments, the rest operator helps in extracting specific elements while assigning the remaining ones to a variable:
```javascript
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first);
// Output: 1

console.log(rest);
// Output: [2, 3, 4, 5]
```

## Summary

The spread and rest operators are powerful tools in JavaScript that offer syntax for array and object manipulation, function argument handling, and more. 
By understanding and utilizing these operators, you can write more concise, readable, and expressive code, making your JavaScript applications cleaner and more efficient.

Hope you find this blog post useful. Happy coding!

_Originally published at_ [_https://antondevtips.com_](https://antondevtips.com/blog/spread-and-rest-operators-in-javascript)_._

### After reading the post consider the following:

- [Subscribe](https://antondevtips.com/blog/spread-and-rest-operators-in-javascript#subscribe) **to receive newsletters with the latest blog posts**
- [Download](https://github.com/AntonMartyniuk-DevTips/dev-tips-code/tree/main/frontend/javascript/spread-rest-operators) **the source code for this post from my** [github](https://github.com/AntonMartyniuk-DevTips/dev-tips-code/tree/main/frontend/javascript/spread-rest-operators) (available for my sponsors on BuyMeACoffee and Patreon)

If you like my content —  **consider supporting me**

Unlock exclusive access to the source code from the blog posts by joining my **Patreon** and **Buy Me A Coffee** communities!

[![](https://cdn-images-1.medium.com/max/233/1*GSZFx05RDUWr5pn_E9bK8w.png)](https://www.buymeacoffee.com/antonmartyniuk)

[![](https://cdn-images-1.medium.com/max/229/1*8tJk9eYCJrkzoAJw2cILSA.png)](https://www.patreon.com/bePatron?u=73769486)