Understanding the Spread Operator(...) in JavaScript
Tags: javascript, es6, beginners, tutorial
Published: 2023-02-02 10:23:17

In today's episode of talking about awesome JavaScript features, we are going to turn our attention to the Spread operator(`...`) or Spread syntax. At the end of this article, you'll find a curated list of the links to other articles I have written in the past on some other JavaScript concepts and features. In the meantime, let us focus on the Spread operator(`...`), what it is all about and how to use it to write better JavaScript code.

The Spread syntax is a JavaScript feature that allows objects and iterables (such as arrays and strings) to be unpacked, or expanded, which can be used to make shallow copies of data structures to increase the ease of data manipulation. It is often used in combination with destructuring.

## What is the Spread operator used for?
This operator can be used to carry out many routine tasks easily. The spread operator can be used to do the following:

- Copying an array

- Concatenating or combining arrays

- Using Math functions

- Using an array as arguments

- Adding an item to a list

- Combining objects

Let's look at an example of each of these use cases.

### Copying an array
Using the Spread operator is a convenient way to copy an array or combine arrays, and it can even add new items.
```javascript
const animals = ['🦁','🐘','🐈','🐕‍🦺','🐇']
const moreAnimals = [...animals];
console.log(moreAnimals) // Array(5) ['🦁','🐘','🐈','🐕‍🦺','🐇']
```
### Combining or Concatenating arrays
The spread operator can be used to quickly combine two arrays.
```javascript
const myArray = [1,2,3];
const yourArray = [4,5];
const ourArray = [...myArray,...yourArray];

console.log(ourArray); // Array(5) [ 1, 2, 3, 4, 5 ]
```
### Using `Math` functions
In my opinion, the best way to understand the use of the spread operator is to look at the built-in functions [Math.min()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min) and [Math.max()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max), which both expect a list of arguments, not an array. Suppose you have an array of numbers and want to get the smallest or largest number in that array, you will have to make use of [Math.min()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min) or [Math.max()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max) but passing an array to any of these functions will return `NaN` which isn't the answer you'd be hoping for. Instead, you should use the (`...`) operator to expand the array as a list of arguments in the `Math` function as demonstrated in the example below:
```javascript 
const numbers = [28, -6, 19, 0]
console.log(Math.min(numbers)) // NaN
console.log(Math.min(...numbers)) // -6
console.log(Math.max(...numbers)) // 28
```
### Using an array as arguments
You can use the spread operator to turn an array into a list of arguments. See the example below:
```javascript
function sandwich(a, b, c) {
  console.log(a); // '🍞'
  console.log(b); // '🥬'
  console.log(c); // '🥓'
}

const food = ['🍞', '🥬', '🥓'];

// Old way
sandwich.apply(null, food);

// ✅ ES6 way
sandwich(...food);
```
### Adding an item to a list
The spread operator can add an item to another array with a natural, easy-to-understand syntax:
```javascript
const numbers = [1, 2, 3, 4]
const moreNumbers = [...numbers, 5, 6, 7, 8]

console.log(moreNumbers) // Array(8) [1, 2, 3, 4, 5, 6, 7, 8]
```
### Combining objects
Watch how the spread operator combines these two objects:
```javascript
const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}
```

> Notice the properties that did not match were combined, but the property that did match, `color`, was overwritten by the last object that was passed, `updateMyVehicle`. The resulting color is now yellow.

### Conclusion
The advent of ES6 did not only make JavaScript more efficient but also more fun with the introduction of cool features like the spread operator and others. Below is the curated list of articles I promised at the beginning of this write up.

- [JavaScript Variable Scope Simplified](https://dev.to/brandonbawe/javascript-variable-scope-simplified-5f42)
- [Introduction to DOM Manipulation](https://dev.to/brandonbawe/introduction-to-dom-manipulation-5hjl)
- [Object Oriented Programming (OOP) in JavaScript](https://dev.to/brandonbawe/object-oriented-programming-oop-in-javascript-1kj2)
- [Understanding the Destructuring assignment in JavaScript](https://dev.to/brandonbawe/understanding-the-destructuring-assignment-in-javascript-3gk4)
- [Understanding Arrow Function Expressions in JavaScript
](https://dev.to/brandonbawe/understanding-arrow-function-expressions-in-javascript-8mi)