Spread VS Rest Operator

#javascript

The ... (dot, dot, dot) operator as I like to call it 😄, has been around since the introduction of ES6, and has helped a lot
of javascript developers manipulate arrays and other iterables easily.

The ... operator can either be called spread or rest depending on where or how it is being used. Let's look at scenarios where it is known as the spread operator.

NB: For the purpose of the post we'll be using arrays, though the ... operator also works on other iterables.

Spread Operator (...)

Lets take the array as a bottle. The spread operator allows you to grab all the content of the bottle without grabbing the bottle itself and putting that content wherever we want. Let's take a look at the following code.

const animals = [🦁, 🐘, 🐍, 🦍, 🐯];
const someOtherAnimals = [...animals];
// someOtherAnimals now contains 🦁, 🐘, 🐍, 🦍, 🐯 and
// animals remains unchanged

Here, the spread operator is used to copy the content of the animals array into the someOtherAnimals array. The spread operator can also be used to copy the contents of multiple arrays into another array.

const wild = [🦁, 🐘, 🐍, 🦍, 🐯];
const domestic = [🐐, 🐔, 🐱, 🐶];
const animals = [...wild, ...domestic];
// animals now contains 🦁, 🐘, 🐍, 🦍, 🐯, 🐐, 🐔, 🐱, 🐶 and
// both wild and domestic remains unchanged.

Rest Operator (...)

The rest operator allows to us to represent an indefinite number of arguments as an array. So unlike the spread operator that spreads out the elements in an array, the rest operator (or the gather operator as some people call it) groups multiple elements into an array. Here's how that would work

const addAll = (...numbers) => {
    return numbers.reduce((acc, num) => acc + num);
};
const sum = addAll(1, 2, 3, 4); // sum is 10
const sum1 = addAll(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // sum1 is 55

In the addAll function, we're are gathering all the arguments regardless of the how many, into the numbers parameter and then returning the sum. That way, we can modify the numbers parameter like we would modify a normal array. Another example of how we could use the rest operator is shown below

const multiplyByNum = (multiplier, ...numbers) => {
    return numbers.map(num => num * multiplier);
};

const multiplyBy2 = multiplyByNum(2, 1, 2, 3, 4);
// multiplyBy2 is [2, 4, 6, 8]

In this case, we are collecting the first argument as the multiplier parameter and gathering all other elements into the numbers parameter as an array, then multiply each number by the multiplier.

In summary, the spread operator spreads the content of an array, while the rest operator gathers elements (arguments to a function) into an array.