Array.from() Method

The Array.from() method creates a new array based on any sort of iterable in JavaScript. It's fairly straightforward, but let's take a look at some ways it can be used.

Say you want to grab a sequence of items on a webpage. You'd generally reach for something like this:

const coolDivs = document.querySelectorAll(".cool");console.log(coolDivs);// expected result:// NodeList(8) [div.cool, div.cool, div.cool, div.cool, div.cool, div.cool, div.cool, div.cool]

So what we get from .querySelectorAll is a NodeList, which looks like an Array, but unfortunately it doesn't have all of the useful methods that an Array would have, like .pop(), .push(), .map(), .reduce(), etc. If we wanted to do any sort of meaningful work with those document elements, we'd have to build an Array of the NodeList.

const coolDivs = Array.from(document.querySelectorAll(".cool"));console.log(coolDivs);// expected output:// (8) [div.cool, div.cool, div.cool, div.cool, div.cool, div.cool, div.cool, div.cool]

How about one more basic example? Array.from() works with other iterables. Check this out:

console.log(Array.from("Hello World!"));// expected output:// (12) ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d", "!"]

There's also a really interesting example from Kerri Shotts from her Medium article, ES2015 Array.from, rest, and spread, where you can pass the length of your array within the object you're to passing Array.from(). I've edited her example a bit to illustrate this.

const items = Array.from({  0: "a",  1: "b",  2: "c",  3: "d",  4: "e",  5: "f",  length: 4,});console.log(items);// expected output:// (4) ["a", "b", "c", "d"]

Array.from() can also take two more arguments: a map function that executes against each item of the array you're outputting, and a this argument.

From MDN, here is the syntax:

Array.from(arrayLike[, mapFn[, thisArg]]);

So what can we do here? We could do something like the following:

const doubleNumbers = Array.from([1, 2, 3, 4], (x) => x * 2);console.log(doubleNumbers);// expected output:// (4) [2, 4, 6, 8]

As such, you could also do all sorts of data manipulation to your outputted array, and since you can just pass an object with only a length property, Array.from() makes for an easy way to quickly construct an array of items.

const arrayOfNumbers = Array.from({ length: 10 }, (_, i) => i);console.log(arrayOfNumbers);// expected output:// (10) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Let's go a bit further with this, too and make a simple Fizz Buzz solution. Fizz Buzz is a fairly basic coding interview question. We want a way to count to some number, let's say 30 (but it should be able to be anything), and if the number is divisible by 3, instead of the number we return "fizz." If the number is divisible by 5, we return "buzz." If the number is divisible by both 3 and 5, we return "fizzbuzz." We'll also want the numbers to be in an array, in case we want to do more work later.

function fizzBuzzGenerator(length) {  return Array.from({ length }, (_, i) => {    // Zero doesn't count    if (i === 0) {      return i;    } else if (i % 3 === 0 && i % 5 === 0) {      return "fizzbuzz";    } else if (i % 3 === 0) {      return "fizz";    } else if (i % 5 === 0) {      return "buzz";    }    return i;  });}
const fizzBuzz = fizzBuzzGenerator(30);console.log(fizzBuzz);// expected output:// (31) [0, 1, 2, "fizz", 4, "buzz", "fizz", 7, 8, "fizz", "buzz", 11, "fizz", 13, 14, "fizzbuzz", 16, 17, "fizz", 19, "buzz", "fizz", 22, 23, "fizz", "buzz", 26, "fizz", 28, 29, "fizzbuzz"]

From MDN: The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object.

See more examples and documentation here.