Convert Iterables to Array using Spread
Use ES6 spread (...) to easily convert Iterables into an Array! Often, iterables are limited in terms of their built-in methods. By converting it into an array, you'll have access to ALL of the amazing array methods such as filter, map, reduce! Awesome 🎉
[ ...'hi' ]; // // ['h', 'i']
[ ...new Set([1,2,3]) ]; // [1,2,3]
[ ...new Map([[1, 'one']]) ]; // [[1, 'one']]
[ ...document.querySelectorAll('div') ] // [ div, div, div]
Built-in Iterables
In JavaScript, we have some built-in iterables that we use spread to convert them to an array:
- String
- Array
- Map
- Set
There's one more, but we won't focus on that for this post, TypedArray
.
What are Iterables?
Iterables are data structures which provide a mechanism to allow other data consumers to publicly access its elements in a sequential manner.
If you're interested in learning more about iterables, check out these awesome posts:
- Exploring JS - Iterables and iterators
- Alligator.io - Introduction to Iterables and Iterators in JavaScript
- MDN: Iteration protocols
String → Array
const myString = 'hello';
const array = [...myString] // [ 'h', 'e', 'l', 'l', 'o' ]
We can convert the array back to a string by using join()
array.join(''); // 'hello'
Set → Array
const mySet = new Set([1, 2, 3]);
const array = [...mySet] // [1, 2, 3]
We can convert the array back to a string by passing it into new Set
new Set(array); // Set { 1, 2, 3 }
Map → Array
const myMap = new Map([[1, 'one'], [2, 'two']]);
const array = [...myMap] // [ [ 1, 'one' ], [ 2, 'two' ] ]
Similar to Set, we can convert the array back to a string by passing it into new Map
new Map(array); // Map { 1 => 'one', 2 => 'two' }
NodeList → Array
const nodeList = document.querySelectorAll('div');
const array = [ ...document.querySelectorAll('div') ];
// [ div, div, div] *
*I suggest you paste the code into your browser to see the actual output
Array.from vs Spread
Another very similar method to the Spread syntax is Array.from
. In fact, we can replace our examples with this:
Array.from('hi') // // ['h', 'i']
Array.from(new Set([1,2,3])) // [1,2,3]
Array.from(new Map([[1, 'one']])) // [[1, 'one']]
Array.from(document.querySelectorAll('div')) // [ div, div, div]
What's the difference?
The difference is in the definition
Array.from
works for:
- array-like objects (objects with a length property and indexed elements)
- iterable objects
Spread only works for:
- iterable objects
So let's take a look at this array-like object:
const arrayLikeObject = {
0: 'a', // indexed element
1: 'b', // indexed element
length: 1, // length property
};
// ✅ Using Array.from
Array.from(arrayLikeObject); // [ 'a', 'b' ]
// ❌ Using Spread
[...arrayLikeObject]; // TypeError: arrayLikeObject is not iterable
Which should I use?
Of course, it depends. If you are working with array-like objects, you have no choice but to use Array.from
. But when it comes to iterables, I've always used spreads
. Why? Because I'm a huge fan of the Airbnb Style guide. I wish I have a better reason, but that's all I have lol 😝 I'm guessing because it's less typing 🤔 If you know the reason, please drop it in the comment 😆
Community Input
@nickytonline: I like using spread as well, but if you want to e.g. convert a NodeList to an array and then map over it, consider using Array.from. I discovered this summer that Array.from has a second argument which is a map callback function that is called as each item is created.
Resources
- MDN Web Docs: Spread
- MDN Web Docs: Array.from
- Array.from vs spread syntax
- DWB: Convert NodeList to Array
- A Simple Guide to ES6 Iterators in JavaScript with Examples
Thanks for reading ❤
Say Hello! Instagram | Twitter | Facebook | Blog | SamanthaMing.com
Top comments (6)
I like using spread as well, but if you want to e.g. convert a
NodeList
to an array and then map over it, consider usingArray.from
.I discovered this summer that Array.from has a second argument which is a map callback function that is called as each item is created.
Looking forward to your next post!
That totally is the benefit with Array.from! Awesome point, let me add it to the code notes😁👍
Whoa, thats awesome
Cant wait to be able to do
That’s new syntax for me🤩...what language is that based from? 😮
Probably haskell or some other functional lamg