Understanding JavaScript's Spread Operator

This is from a tweet which you can find here.

Ever confused by JavaScript's spread operator? Do you know how the following code works to turn a string into an array of characters?

I'll explain it all below. 👇

let pattern = "xxxo";

// returns true
[...pattern].some(l => l === "o");

// returns false
[...pattern].every(l => l === "x");

What you're seeing here is the spread syntax. It's most commonly used on arrays.

let a1 = [1,2,3];

...a1

This syntax "spreads out" the elements of the array. So the above basically becomes the numbers 1, 2, and 3 but not in an array. They are spread out and ready to be used (you'll get an error if you try to spread them on their own line like I did, you gotta do something with them)

So type in the following two lines of code:

console.log([1,2,3])

console.log(...[1,2,3]);

You'll get different results. The first will log out an array. The second will log out 3 numbers.

The second is actually identical to this:

console.log(1,2,3)

because the spread operator has "spread out" the 3 numbers into 3 arguments.

Passing spread out items into a function is only one use of the spread operator. You can also take them and create a new array:

let a1 = [1,2,3]

let a2 = [...a1]

this creates a brand new array that contains the same elements, but is a different object (shallow copy). This is MUCH different than the following code:

let a1 = [1,2,3]

let a2 = a1

That just creates 2 pointers at the same variable/array. The spread operator actually creates a new array. So that means the following:

let a1 = [1,2,3]

let a2 = [...a1]

a1 === a2 // false

That's the spread operator. But it doesn't just work on arrays. It also works on strings (also iterables but we'll save that for later) and "spreads out" the letters. If you ever accessed the letters of a string by index like an array, this is familiar.

let name = "joe"

...name  
// spreads out j, o, and e

With those letters spread out, you can do the same things you can do with a spread out array.

let name = "joe"

console.log(...name)
// same as console.log('j', 'o', 'e')

This also means we can create an array from these spread out letters.

let name = "joe"

let arrayName = [...name]
// same as ['j', 'o', 'e']

And now we have a VERY succinct way to turn a string into an array of letters and we can use all the cool array methods on our string. And easily turn it back into a string with .join() if we want.

let pattern = "xxxoxxo"

let binary = [...pattern].map(l => {
  if(l === 'x') return '1';
  if(l === 'o') return '0';
}).join('')

// binary is now 1110110

Discounted Courses

Here at Thinkster, we use educational science to teach you five times faster than you would learn the same topics elsewhere. By joining as a Pro subscriber you have access to our complete library on courses on Angular, React, Vue, JavaScript, and More.

To help you get started, use this link for a discount on a monthly membership.

Or save even more with an annual membership.