Array Spread | joeyreyes.dev

June 23, 2019

I'm back from my week in Colorado! I don't want to lose momentum or motivation after the conference, so I'm diving right back into it by taking a look at Spread syntax. This one breaks down into three categories -- Array Spread, Function Spread, and Object Spread. They all behave somewhat similarly, but I'll break them apart into three separate posts.

It's probably best to begin with the syntax of Array Spread.

The Spread operator takes an ellipses symbol ... and combines it with what Brandon Morelli terms a receiver in this Medium post. The receiver can be an array, a function, or an object.

The syntax for Array Spread is:

[...iterableItem]

In this case, the receiver is the array/bracket notation.

At its most basic application, Array Spread is an easy way to make a copy of an array, or build an array from any iterable:

const array = [1, 2, 3, "four", "five"];
const spreadArray = [...array];
console.log(spreadArray);
// expected output: [1, 2, 3, "four", "five"]

const blogName = "Code and Tacos";
const blogNameArray = [...blogName];
console.log(blogNameArray);
// expected output: ["C", "o", "d", "e", " ", "a", "n", "d", " ", "T", "a", "c", "o", "s"]

You can also combine multiple different arrays, producing a new array (into which you can also put new items). Let's say you take your car to the mechanic. At the mechanic's shop they have two car care packages: a basic package (which is an oil change, tire rotation, and brake check), and a premium package (which is a car wash, tire shine, wax, and interior vacuum). You decide to purchase both packages. However, as the mechanic is working on and detailing your car, he determines that you also need to replace your headlight bulbs. Array Spread will let you combine all of this into one array that will detail all of the various things the mechanic will take care of on your car:

const basicCarCarePackage = ["oil change", "tire rotation", "brake check"];
const premiumCarCarePackage = ["car wash", "tire shine", "wax", "interior vacuum"];

const allCarMaintenanceItems = [...basicCarCarePackage, "replace headlight bulbs", ...premiumCarCarePackage];
console.log(allCarMaintenanceItems);
// expected output: ["oil change", "tire rotation", "brake check", "replace headlight bulbs", "car wash", "tire shine", "wax", "interior vacuum"]

Lastly, if you've read through this whole series you might remember waaaay back on the .reduce() Method post that we wrote a solution for the array flattening exercise from Marijn Haverbeke's Eloquent JavaScript.

Use the reduce method in combination with the concat method to "flatten" an array of arrays into a single array that has all the elements of the input arrays.

To recap, this was the .reduce() solution:

const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flattened = arrayOfArrays.reduce((flat, currentElement) => flat.concat(currentElement), []);
console.log(flattened);
// expected result: [1, 2, 3, 4, 5, 6];

However, that's a mouthful of code. Array Spread gives us a more elegant and concise way of solving this problem (though as of ES2018, still not the most elegant or concise way):

const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flattened = [].concat(...arrayOfArrays);
console.log(flattened);
// expected result: [1, 2, 3, 4, 5, 6]

From MDN: Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

See more examples and documentation here.

More Spread Syntax

Read more about Spread Syntax, Destructuring, and Rest here: