... or ...? The Rest and Spread Operator

One thing that I have always respected about coding is how everything is cut and dry. There are no double meaning words like in the English language. Like ship for example! Am I talking about a boat or about Amazon Prime? We have keywords in programming languages for a reason. Then ES6 comes along and gives us the rest and spread operator. They both have the same ... syntax but their use varies widely. In this short article I will explain what each operator is and share some examples.

...Rest

The rest operator helps us manage parameters of a function. It allows us to create a function that takes a variable number of arguments. This is much different than the traditional way of declaring functions. What the ... does is convert the arguments we give it into an array. From there we can access each argument the same way you would with any array. The syntax for the rest operator is very simple.

//place ... in front the name you want for your array of arguments
function someFunc(...args){
//When this function is called and arguments are passed in we will have an array of the arguments called args
for(argument of args){
console.log(argument)
}

someFunc(1,2,3)
//=> 1
//=> 2
//=> 3

Some important things to remember about the rest operator. The rest operator should always be your last parameter and the rest operator is used only use during function declaration.

//the first argument passed will be ownerName the rest of the arguments will be placed in an array called dogNames
function ownerAndDogs(ownerName, ...dogNames){
console.log(`Hi my name is ${ownerName}`)
console.log(`I have ${dogNames.length} dog(s)`)
console.log("Their names are ")
for(name of dogNames){
console.log(name)
}
}

ownerAndDogs("Tripp", "Ada", "Taz")
//=>Hi my name is Tripp
//=>I have 2 dog(s)
//=>Their names are
//=>Ada
//=>Taz

...Spread

The spread operator is used to spread an array. There are two main use cases for this operator. The first is when we invoke our function. If we have a function that has multiple parameters and an array that contains the data we want to pass in as an argument, we can use the spread operator to spread the array out. This will make each element of the array a separate argument that we are passing into our function.

//array to spread
let dogNames = ["Ada", "Taz"]

//function that requires two arguments when invoked
function sayDogNames(dog1, dog2){
console.log(dog1)
console.log(dog2)
}

//using the spread operator to spread my array into the two arguments needed for the function
sayDogNames(...dogNames)

If the array you are trying to spread has more elements than is needed in your function, it will still work. The function will just used the first couple of elements it needs to fulfill its required arguments. The rest of the elements will be ignored.

The second main use case for the spread operator is to make duplicates. Arrays are a non-primitive data type in JavaScript. This means that they are passed by reference not value. We can use the spread operator to pass the value of an array. That way we can modify it without worrying about harming the original array.

let array = [1,2,3,4]
//the spread operator spreads the array into individual elements of the new array instead of passing by reference.
let arrayCopy = [...array]

arrayCopy.push(5)

//array => [1,2,3,4]
//arrayCopy => [1,2,3,4,5]

There you have it. The spread and rest operator may look the same but they do two different things. An easy way to keep them apart is to remember that the ...rest is used in function declarations and the ...spread is used when invoking a function or copying an array. I hope this article helps clear any confusion that surrounds ... and ....