JavaScript's Three Dots: Spread Operator vs. Rest Parameters

What is the difference between the spread operator and rest parameters, anyway? Aren't they the same thing? I thought so too, but they are pretty much opposites.

TL;DR: When you pass in arguments to a function using the spread operator, you are using rest parameter syntax.

The spread operator allows expressions to be expanded in places where multiple arguments, elements or variables are expected. In both cases below, the spread operator copies every element in the original array, and any elements that come afterward are pushed onto the end. I've also used the spread operator in solving a common interview question called Max Characters.

Copy an Array

Concatenate an Array

Find the Most Frequent Character in a String

Rest Parameters - You Can Use Array Methods!

Rest parameters condense elements into an array. You are using rest parameters if the three dots are being passed in as an argument into a function. In the below example:

• Rest parameter syntax allows an unlimited number of arguments to be passed down to the multiply function.
• Each time you will return an array with the same number of elements as the number of arguments passed in, minus one.
• The values of each element will equal the original values multiplied by the first number.

That's it! Now you know. 👋