JavaScript: A Beginner’s Guide to Understanding Spread and Rest Syntax

Peter D'Elia
Apr 13, 2020 · 5 min read

While working through Launch School’s JS101, these three dots, ..., kept popping up in code solutions to the small exercises. Coming from a background in Java and Python, I hadn’t seen this before, and its uses were opaque at first. Especially confusing was the fact that ... seemed to work in different ways, depending on the context. But after venturing to learn the names of its two uses (spread and rest) and what it does in its various contexts (explained below!), I now find the dots to be useful in my own programming practice.

Because it is not difficult to find explanations of spread and rest syntax elsewhere, this blog post strives to be different by making it as easy as possible to understand what the syntax does. Thus, it is intended for newcomers to the ideas of spread and rest.

We’ll look at pairs of examples whose only difference is the use of the three dots, to isolate how it changes the code’s behavior. The post is grouped by use case. And we will mostly focus on the uses of this syntax in relation to arrays, although it can be used with strings and objects as well.

What’s the difference between Rest and Spread?

The ... syntax is used in two ways in JavaScript: as a rest pattern and as the spread operator. As a spread operator, ... allows elements to be expanded out from an array, while as rest pattern, use of the dots places otherwise ungrouped elements into an array.

It might be helpful to realize that while rest and spread patterns exhibit opposite behaviors, they’re similar in that they both move elements in and out of arrays.

Spread Syntax for array copying and concatenation

Since ... syntax is used for two purposes, the only way to know what to expect of its behavior is to look at its context. Let’s start with examples of spread syntax:

let arr = ['a', 'b'];
let nestedArr = [arr];
let spreadCopy = [...arr];
// [ [ 'a', 'b' ] ]
// [ 'a', 'b' ]

When ... is used within an array literal, each element of the array that follows the ... is expanded into the new array. In spreadCopy, the spread operator is used to make a copy of arr. By contrast, in nestedArr, the original array from arr is nested into another array. It might be helpful to think of the elements from arr as ‘breaking out’ of their brackets in spreadCopy. This is a nice concise way of making a copy of an array. Another example:

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let doubleNested = [arr1, arr2];
let spreadArr = [...arr1, ...arr2];
// [ [ 1, 2, 3 ], [ 4, 5, 6 ] ]
// [ 1, 2, 3, 4, 5, 6 ]

The example above shows how we can concatenate arrays using .... The difference between the output of doubleNested and spreadArr mirrors the behavior of the first example. Here, ... effectively removes the nested arrays and expands their elements into the outer array. Once again, it might be useful to think of the elements of arr1 and arr2 as breaking out of their brackets and all of their elements being inserted into the new array. The result is the same as calling arr1.concat(arr2).

Spread Syntax for splitting a string with an array literal

The same idea can be used for strings:

let string = 'hello';
let stringToArr = [string];
let spreadString = [...string];
// [ 'hello' ]
// [ 'h', 'e', 'l', 'l', 'o' ]

In this example, using the ... is just like calling split('') on string. But the idea is similar to the above array examples: each character in the string is expanded into the new array. Once again, the difference is made clear when comparing the output of stringToArr to that of spreadString.

Spread Syntax for Passing Multiple Arguments in Function Calls

When used as an argument in a function call, the ... will expand a passed array into the function’s defined arguments. Here’s an example with and without spread syntax:

function spread(a, b, c) {
return a + b + c;
let numbers = [1, 2, 3];spread(...numbers);
// 6
// '1,2,3undefinedundefined'

When spread(...numbers) is called, the spread operator unpacks the three elements of numbers into arguments a, b, and c. They are then added together inside the function, and the sum is returned.

In contrast, when called without spread syntax, spread(numbers) retains the array passed by numbers and assigns it to variable a. It then interprets the + signs within the function declaration as string concatenation operators, implicitly converts numbers to a string, and concatenates the result with the undefined variables b and c, resulting in the strange-looking output above.

Rest Syntax for Handling Multiple Parameters in Function Definitions

We’ll now turn to rest syntax. In a function definition, the ... will place any number of passed arguments into a single array. Note that this behavior is the opposite of how we can use the spread operator in a function call. It’s important to remember that rest syntax must be the last parameter defined in the function. Here’s an example:

function rest(...args) {
function withoutRest(args) {
rest(1, 2, 3, 4);
// [ 1, 2, 3, 4 ]
withoutRest(1, 2, 3, 4);
// 1

Here, we can see that the call to rest with arguments 1, 2, 3, 4 outputs an array that concatenates all of the passed arguments. When we pass the same arguments to withoutRest, we get an output of 1. This is because the args parameter in this function definition only accepts a single argument and so ignores the subsequent arguments.

Rest Syntax for Assigning Multiple Elements to an Array Variable

Rest syntax can also be used in an array destructuring assignment. Here’s an example:

let arr = [1, 2, 3];
let [a, ...b] = arr;
let [c, d] = arr;
// 1
// [ 2, 3 ]
// 1
// 2

Just like in a function definition, using a rest element here will place multiple elements into an array. Thus, b is assigned to the rest of arr that is not captured by a. By comparison, d omits the dots and is therefore only assigned to the second element of arr. For more on array destructuring assignments, see the MDN docs.

A Final Thought

This was meant to be a concise and clear summary of the basics of spread and rest syntax, with a focus on understanding what the three dots are actually doing in code. To summarize, the syntax is a clean-looking way to copy and concatenate arrays, and to split characters in a string. It can also be a useful way to pass multiple elements in function calls and definitions, and in array destructuring assignments. As always, if you need more depth on the topic, consult the MDN docs.

The Startup

Get smarter at building your thing. Join The Startup’s +787K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Peter D'Elia

Written by

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Peter D'Elia

Written by

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store