Javascript: How to Use the Spread Operator and Rest Parameter
Tags: codenewbie, javascript, beginners
Published: 2020-11-07 17:42:06

With the introduction of [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_%E2%80%93_ECMAScript_2015), Javascript developers gained a handful of features. There are two features in particular that I'll be covering in this post: 

- spread operator
- rest parameter

![https://www.epicureanbutter.com/static/images/content/spread-butter-1920x760.jpg](https://www.epicureanbutter.com/static/images/content/spread-butter-1920x760.jpg)

**Spread Operator**

The spread operator is simply three dots and it is used just before some type of iterable (like an array or string).

We use the spread operator when we want to well... spread, or expand, or split up, the array or string into individual arguments or elements so that we can easily make use of them within functions or arrays, where arguments or elements are expected.

Using it within functions:

```jsx
function sentence(name, occupation, mood){
	return `${name} is a ${occupation}. ${name} is ${mood}`
}

// Instead of needing to do this:
sentence("Tony","plumber","tired") // "Tony is a plumber. Tony is tired."

// or this:
let words = ["Tony","plumber","tired"]
sentence.apply(null, words) // "Tony is a plumber. Tony is tired.

// We can now simply do:
let words = ["Tony","plumber","tired"]
sentence(...words) // "Tony is a plumber. Tony is tired"
```

Using it within arrays:

```jsx
let fourFiveSix = [4,5,6]
let numbers = [1,2,3,...fourFiveSix,7]

console.log(numbers) // [1,2,3,4,5,6,7]
```

**Rest Parameter**
The rest parameter (**used only as the last parameter in a function**) allows us to represent arguments as an array with no limit. 

To use a rest parameter — we simply use three dots, followed by whatever we want to refer to the soon to be array as. It is essentially the opposite of what our spread operator does, since it combines any number of parameters into an array, whereas with spread — it spread out, expanded, or split each element of the array (or iterable of choice) into their own individual arguments / elements.

Here is the rest parameter in action:

```jsx
function numbers(firstNum, secondNum, ...notNumbers){
		console.log(firstNum)
		console.log(secondNum)
		console.log(notNumbers)
}

numbers(1,2,"dog")
// 1
// 2
// ["dog"]

numbers(1,2,"dog","cat",true)
// 1
// 2
// ["dog", "cat", true]
```

Notice that regardless of how many arguments we passed to numbers after the first two parameters, *firstNum* and *secondNum*, we were able to make use of the extra arguments — since they were combined into an array, thanks to our rest parameter *notNumbers*.

These are obviously very boiled down examples of how to use the spread operator and rest parameter. As always, refer to MDN for more info:
Spread Operator: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
Rest Parameter: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters)

Feel free to reach out on any of my socials for questions, feedback, or just to connect / say hello 👋.