DEV Community

Cover image for JS Spread Operator: How It Works and Why It's Useful
Allison Cortez
Allison Cortez

Posted on

JS Spread Operator: How It Works and Why It's Useful

The spread operator is a super useful piece of syntax, introduced with the ES6/ ES2015 version of Javascript.

Main Function
The spread operator allows an iterable (array expression or string) to be expanded. So what does that even mean?

Basically, there are 3 places to use spread:

  1. function calls(executing a function)
  2. array literals (making a new array)
  3. object literals (making a new object)

Function Calls

Lets say we have an array:

const emojis = ["sad face", "happy face", "heart", "sun"]
Enter fullscreen mode Exit fullscreen mode

If I console.log, I would get back an array of strings.

console.log(emojis)
// => ["sad face", "happy face", "heart", "sun"]
Enter fullscreen mode Exit fullscreen mode

What if I just wanted the content inside of the array? This is where the spread operator comes in.

console.log(...tvShows)
// => sad face happy face heart sun
Enter fullscreen mode Exit fullscreen mode

The spread operator gives us the capability of extracting these values from the array.

Summary:
We can spread an iterable into separate arguments in a function call.

Array Literals

Quickly copy, add on, and create arrays based on existing arrays.

Let's say we have the following:

const dogs = ["Bud", "Champion"]
const cats = ["Stella", "Dolly"]
Enter fullscreen mode Exit fullscreen mode

What if I want to join these 2 arrays? I could do something like this:

const pets = [dogs, cats]
// => [Array(2), Array(3)]
Enter fullscreen mode Exit fullscreen mode

The return value would be a nested array.

What if I just want to get back one array?

const pets = [...dogs, ...cats]
// => ["Bud", "Champion", "Stella", "Dolly"] // YAY!
Enter fullscreen mode Exit fullscreen mode

Note: order DOES matter. Because we put in dogs before cats, we got dogs first on the list.

more examples:

[...dogs,"Buddy","cats", "Chester"]
// =>["Bud", "Champion", "Buddy", "Stella", "Dolly", "Chester"]
Enter fullscreen mode Exit fullscreen mode

Copying Arrays(this works for objects too)

Let's say we want to make copies of the following:

const colors = ["green","blue", "yellow"]
Enter fullscreen mode Exit fullscreen mode

In Javascript, if you set a variable equal to an existing array, they are linked and will point to the same thing in memory.

const colorCopy = colors
colorCopy.push("white")

colorCopy
// => ["green","blue", "yellow", "white"]

colors // original array also got updated :(
// => ["green","blue", "yellow", "white"]
Enter fullscreen mode Exit fullscreen mode

this updates our copy, but it ALSO updates our original. That's not what we want!

One good reason for using the spread operator is that it is non-destructive. Here's how we can make a copy of the original, without manipulating the original array:

const colorCopy = [...colors]
colorCopy.push("white")

colorCopy
// => ["green","blue", "yellow", "white"]

colors // original array
// => ["green","blue", "yellow"]
Enter fullscreen mode Exit fullscreen mode

Note: spread only goes one level deep when copying an array.

Conclusion
Using the spread operator can be so useful! I hope this was a helpful breakdown.

Resources

Top comments (0)