Javascript: How to Use the Spread Operator and Rest Parameter

With the introduction of ES6, 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

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:

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:

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:

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
Rest Parameter: 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 👋.