DEV Community

Cover image for Spread VS Rest Operator
Abdulqudus Abubakre
Abdulqudus Abubakre

Posted on

45 7

Spread VS Rest Operator

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (2)

Collapse
 
timothyokooboh profile image
timothyokooboh โ€ข

Nice one. Very clear explanation

Collapse
 
projektorius96 profile image
LG โ€ข

Nice one , indeed ! <3

๐Ÿ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay