Some use cases for JavaScript's Spread Syntax

There's a new JavaScript syntax in town!

I'm just kidding; it's not that new. It's been around a couple years and I've gotten to use it sporadically. But it can come in really handy when you're dealing with arrays, strings or other iterables.

Like bullets from a
machine gun.

It looks like a machine gun blast, which is what gives it its name... I think.

The Syntax

The Spread Syntax is basically three periods followed by the object name to be deconstructed.

var obj = [100, 200, 3, 4, 5];
...obj //gives you 100, 200, 3, 4, 5

var str = "hello";
...str //gives you "h", "e", "l", "l", "0"

The syntax can't be used by itself as a value. It's actually a series of comma-separated values. So think of the Spread Syntax as a representation of those values, which can then be used in a construction of an array, or to fill in a function call.

Thus, if you have this...

var arr = [100, 200, 3, 4, 5];

...and you want to make an equivalent array, you could do this.

var arr = [100, 200, 3, 4, 5];
var arr2 = ...arr; //var arr2 = [100, 200, 3, 4, 5];

If you have an array of arguments...

var args = [true, 'test', 100];

function x(a, b, c)
{
    //code here
}

...you could do this.

var args = [true, 'test', 100];

x(...args); //x(true, 'test', 100)

function x(a, b, c)
{
    //code here
}

Copying an array

In one of the previous examples, we copied an array. What is the difference from doing, say, this?

var arr = [100, 200, 3, 4, 5];
var arr2 = arr;

Well, if you pushed a value to arr, arr2 would be affected as well.

var arr = [100, 200, 3, 4, 5];
var arr2 = arr;

arr.push(1000);
console.log(arr2); //gives you [100, 200, 3, 4, 5, 1000]

If you pushed a value to arr2, arr would similarly be affected.

var arr = [100, 200, 3, 4, 5];
var arr2 = arr;

arr.push(1000);
console.log(arr2); //gives you [100, 200, 3, 4, 5, 1000]

arr2.push(2000);
console.log(arr); //gives you [100, 200, 3, 4, 5, 1000, 2000]

Sometimes, that's just not what you want! So if we used the Spread Syntax to make array copies, those arrays would be independent of each other despite sharing the initial same values.

var arr = [100, 200, 3, 4, 5];
//var arr2 = arr;
var arr2 = [...arr]

arr.push(1000);
console.log(arr2); //gives you [100, 200, 3, 4, 5]

arr2.push(2000);
console.log(arr); //gives you [100, 200, 3, 4, 5, 1000]

Concatenating arrays, and other splicing

If you had these arrays, how would you concatenate them? Probably using some version of a structural loop (tedious) or the concat() method (better).

var arr1 = [1, 2, 3, 4, 5];
var arr2 = [6, 7, 8, 9];

Or use the Spread Syntax!

var arr1 = [1, 2, 3, 4, 5];
var arr2 = [6, 7, 8, 9];

varr arr3 = [...arr1, ...arr2]; //gives you [1, 2, 3, 4, 5, 6, 7, 8, 9]

This also works if you want to place the contents of an array within another array, or, as some of us like to call it, splicing.

var arr1 = [1, 2, 3, 4, 5];

varr arr2 = ["a", "b", "c", ...arr1, "d", "e", "f"]; //gives you ["a", "b", "c", 1, 2, 3, 4, 5, "d", "e", "f"]

Splitting a string

Most programming languages would already have a function to convert a string into an array of its characters. For JavaScript, it's the split() method.

var str = "test";
var arr = str.split(); //gives you ["t", "e", "s", "t"]

This pretty much does the same thing, but a lot more simply. Though this wouldn't work if you had "t e s t" and wanted to get ["t", "e", "s", "t"]. In a case like this, you would be better served using the split() method with a space passed in as an argument.

var str = "test";
var arr = [...str]; //gives you ["t", "e", "s", "t"]

Function calls

I mentioned function calls earlier. Some functions have an infinite number of parameters, such as the max() and min() methods of the Math object.

console.log(Math.max(1, 200, 4, 5, 6)); //gives you 200
console.log(Math.min(1, 200, 4, 5, 6)); //gives you 1

If you already had the values in an array, like so, you could do this.

var arr = [1, 200, 4, 5, 6];
console.log(Math.max(...arr)); //gives you 200
console.log(Math.min(...arr)); //gives you 1

That's it!

Thanks for reading. Just wanted to share this little tidbit.

And also some of the stuff I read about the Spread syntax confused the hell out of me, so I figured I would try to explain it my way. There's actually more fancy stuff you could do with the Spread Syntax. Maybe another time, for another day.

Spread the love, baby
T___T