Breaking Down ES6: Spread Operator

#javascript #beginners #codenewbie #webdev

Last week I started this blog series to break down the new tools introduced in ES6 by writing about let and const. This week I am going to jump into the spread operator, which is expressed by three consecutive dots: ….

This tool serves many purposes and I’ll be covering a few of the important ones. For the purpose of this post, however, I will not be discussing the use of the spread operator on objects, as that was not introduced until ES9.

So, let’s go ahead and jump on in.

Concatenating Arrays

In JavaScript, we use the concat() method to combine two or more arrays together. Using this method does not change the existing arrays but returns a new array.

let languages = ["JavaScript", "Ruby", "SQL"]
let frameworks = ["React", "Rails"]
let myStack = languages.concat(frameworks)

console.log(myStack) // ["JavaScript", "Ruby", "SQL", "React", "Rails"]

We can mirror this method and receive the same results by utilizing the spread operator instead of concat().

let languages = ["JavaScript", "Ruby", "SQL"]
let frameworks = ["React", "Rails"]
let myStack = [...languages, ...frameworks]

console.log(myStack) // ["JavaScript", "Ruby", "SQL", "React", “Rails"]

Note: Using the spread operator in this case is not recommended, as using concat() is faster comparatively.

Copying an Array

When it comes to copying one array into another, aka assigning the value of a new array to an existing array, the spread operator is an awesome tool to use. Before ES6 and the introduction of the spread operator, you could accomplish this but there was one tiny snag. If you attempted to alter the new array, it also affected the original array.

let myStack = ["JavaScript", "Ruby"]
let myStack2 = myStack

console.log(myStack2) // ["JavaScript", "Ruby"]
myStack2.push("SQL")
console.log(myStack) // ["JavaScript", "Ruby", "SQL"]

With the spread operator, this issue is eliminated. You can safely alter the new array without changing the original array.

let myStack = ["JavaScript", "Ruby"]
let myStack2 = [...myStack]

console.log(myStack2) // ["JavaScript", "Ruby"]
myStack2.push("SQL")
console.log(myStack) // ["JavaScript", "Ruby"]

Expanding an Array

In order to expand an array, aka inserting one array into another at any given location, and keep the resulting array flat, we want to use the spread operator. Before ES6, if you expanded an array, you would end up with a nested array.

let myStack = ["JavaScript", "Ruby"]
let techLanguages = ["Python", myStack, "Java"]

console.log(techLanguages) // ["Python", ["JavaScript", "Ruby"], “Java"]

Luckily for us, the spread operator makes it easy to expand an array without creating a nested array.

let myStack = ["JavaScript", "Ruby"]
let techLanguages = ["Python", ...myStack, "Java"]

console.log(techLanguages) // ["Python", "JavaScript", "Ruby", “Java"]

String to Array

One neat little thing about the spread operator is that you can turn a string into an array. I can’t think of any great use cases for it off the top of my head, but I thought I’d include this little tidbit for fun.

let ruby = "Ruby"
let char = [...ruby]

console.log(char) // ["R", "u", "b", “y"]

Math

The spread operator makes it possible to place an array in Math object methods. Without using the spread operator, the output would be NaN.

let nums = [1, 2, 5, 9]

Math.max(nums) // NaN

When using the spread operator, it allows the contents of the array to be read as a list of numbers instead of an array.

let nums = [1, 3, 5, 7, 9, 11, 13]

Math.max(…nums) // 13

Final Thoughts

While I have not covered every single aspect of the spread operator, I did cover a few of the most popular use cases of it. For those of you reading this, please feel free to expand on the discussion and mention other purposes of the spread operator.