DEV Community

Melissa Guachun
Melissa Guachun

Posted on • Updated on

Rest vs Spread Operator

I remember being asked about the difference between the rest and spread operator and drawing a blank. I hadn't used the spread operator since I was in my bootcamp, and even on that occasion it seemed a bit glossed over.

So I wanted to address this knowledge gap by walking through the use and differences between the rest and spread operator.

It's easy to confuse the spread operator and the rest operator because their syntax is so similar.

Spread Operator: we can spread the content of an iterable into individual elements.

Note: An iterable is an object which can be looped over or iterated over with the help of a for loop. Objects like lists, tuples, sets, dictionaries, strings, etc. are called iterables

Let's look at the Spread Example:


const arr = ["My", "name", "is", "Melissa"]

const copyArr = [...arr]

console.log(copyArr)

console.log(...copyArr)

Enter fullscreen mode Exit fullscreen mode

Let's see what the console returns when we console.log(copyArr)

Spread operator returning the array of strings

We return ["My", "name", "is", "Melissa"]

The spread operator allows us unpack collected elements into their own single elements.


Rest: allows a function to accept an indefinite number of arguments as an array

Let's look at an example:

function logFullName(firstName, ...familyName) {
  console.log(firstName);
  console.log(familyName);
}

logFullName("Robert", "Alfred", "Cole"); 

Enter fullscreen mode Exit fullscreen mode

**Update: thank you Bryce Dorn for correcting my code!

The elements of myName is being broken apart and reorganized into a new subarray. This is called destructuring, an array or object is broken into smaller pieces.

Let's look at our console:

Fixed use of spread in function

The first console.log of console.log(firstName) returns the first element in the array, 'Robert'. The rest of the elements in the array are collected and put into a new sub array called familyName. This is why when we console.log(familyName) we get the new sub array consisting of the rest of the original array ["Alfred", "Cole"].

Think of rest as a mnemonic device that means it creates its own collection of the rest of the array. In this example, that would be the new sub array ["Alfred", "Cole"].

**Update: Thanks to hacker4world for giving an example on the use and syntax with functions:

function logParams(...params) {
     console.log(...params);
}

logParams(1,  2,  3, 4);

Enter fullscreen mode Exit fullscreen mode

To further understand the logic at play, create your own examples and test them in your console of your choosing. Practicing this achieves a better understanding of rest and spread!

Discussion (7)

Collapse
hacker4world profile image
hacker4world

Great article but you did not give an example on functions
Heres what the example would be:

function logParams(...params) {
     console.log(...params);
}

logParams(1,  2,  3, 4);
Enter fullscreen mode Exit fullscreen mode

Now the function can take an infinite amount of params and it puts them in the array

Collapse
melguachun profile image
Melissa Guachun Author

Thank you for pointing that out!! I'll add a note and tag you and the article if you don't mind!

Collapse
hacker4world profile image
hacker4world

Ok good

Collapse
bryce profile image
Bryce Dorn

Hi, your rest example is actually still just spread syntax! The definition you included is correct:

Rest: allows a function to accept an indefinite number of arguments as an array

But your example isn't a function. Here's what it would look like using rest:

function logFullName(firstName, ...familyName) {
  console.log(firstName);
  console.log(familyName);
}

logFullName("Robert", "Alfred", "Cole");
Enter fullscreen mode Exit fullscreen mode
Collapse
melguachun profile image
Melissa Guachun Author

Ah! Thank you for pointing that out! I'll make that change, thanks Bryce!

Collapse
chrisgreening profile image
Chris Greening

Great work Melissa! I always love a short and sweet article on neat language features :~)