Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 828 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Converting an array-like object into an Array with Array.from()

2:19 JavaScript lesson by

Array.from() lets you convert an "iterable" object (AKA an array-like object) to an array. In this lesson, we go over grabbing DOM nodes and turing them into an array so that we can use methods like Array.filter() and Array.forEach() on them.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Array.from() lets you convert an "iterable" object (AKA an array-like object) to an array. In this lesson, we go over grabbing DOM nodes and turing them into an array so that we can use methods like Array.filter() and Array.forEach() on them.

Avatar
Brian

Some more background. NodeList, HTMLCollection, etc. are both Iterable (they implement [Symbol.iterator] on their prototype, and ArrayLike (they have an integer length property). The cool thing about Array.from is that is handles both cases, so anything that you might previously have done [].slice.call(ArrayLike) on is covered, as are Iterables (the result of generators, along with Map, Set, TypedArray, etc)

It turns out that most ArrayLike objects (such as arguments) are also Iterable in ES6, and projects are following suit (e.g. jQuery returns Iterable collections now).

Here we have a list of prices that belong to products inside of a store. We'd like to highlight the prices that are less than $10, and we don't have access to the server code to be able to do that on the server. So we're going to do it with JavaScript on the client. Let's grab our products and store them in a variable called products, and we'll do that by saying document.querySelectorAll(''), and we know that each of these has a class name of .product, so we'll use that to grab them.

const products = document.querySelectorAll('.product');

console.log(products)

Then let's log these out, see what they contain. So we can see that we have our products and if we open this up, we can see that they are of the type NodeList, and the problem with the NodeList is that it's like an array but it's not an array, so it doesn't have all of the typical array methods that we want to use like filter, and forEach, and reduce.

NodeList

What we can do is we can convert this NodeList into an array, and then we'll be able to use the array methods on the lists.

In the past there's been a lot of hackey ways to do this, but now with ECMAScript 2015 we have a native way to do it with the array.from method. So I'm going to go up here and wrap my NodeList here with array.from.

If we log this out, we'll be able to see if we open this up again, that it's now of type array. Now we can use the array methods to solve our original problem of highlighting numbers that are less than 10 in the list.

const products = 
Array.from(document.querySelectorAll('.product'));

Array

What I'm going to do now is say products, and we'll filter those products, and we'll filter if the product, the number inside of that product, supply parseFloat and we'll grab the product.innerHTML, and we'll check if it is less than $10. Then when we get that list of the products that are less than $10, we're going to forEach over them, and for each of those products, we're going to say product.style.color and we'll set that equal to red.

products
  .filter(product => parseFloat(product.innerHTML) < 10)
  .forEach(product => product.style.color = 'red');

Now we're highlighting the items that are less than $10. So you can see that being able to convert a NodeList or any other type of iterable collection into an array can be very useful.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?