Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Array.From

By David Walsh on February 12, 2016

In the past we used a variety of hacks to convert Array-like objects (like arguments and NodeList) to a true array. You can see a few of those hacks here:

Essentially we would use Array.prototype.slice.call() on the arguments or NodeList to do the conversion. These days there is a more straightforward solution to converting one type to another.

Convert `NodeList` to `Array`

var divs = Array.from(document.querySelectorAll('div'));

// Array[232] (every DIV on the page)

Convert `arguments` to `Array`

function something() {
  var args = Array.from(arguments);

  // Array['yes', 1, {}]
}
something('yes', 1, {});

Convert `String` to `Array`

Array.from('JavaScript'); // Same as 'JavaScript'.split('')

// ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]

The code is much cleaner and no need for the slice hack!

Recent Features

By David WalshSeptember 19, 2011
Introducing MooTools Templated
One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...
By David WalshMay 18, 2011
CSS Gradients
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

By Julian ShapiroJuly 31, 2014
The Simple Intro to SVG Animation
This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery. An SVG element is a special type of DOM element...
By David WalshJuly 2, 2008
Create a NoScript Compatible Select Form Element with an onChange Event
I wouldn't say that I'm addicted to checking Google Analytics but I do check my statistics often. I guess hoping for a huge burst of traffic from some unknown source. Anyway, I have multiple sites set up within my account. The way to...

Discussion

hexx
small note -> babel doesn’t transpile Array.from() – so keep that in mind to include it ;)

hexx
[].slice.call(stuff) isn’t much longer than Array.from(stuff)
XPoli
Array.apply(0, stuff) is also a good solution
Prashant Palikhe
It’s not about which one is shorter, Array.from is just more declarative approach to doing the same thing.
Evan
There’s a babel plug-in for Array.from()

https://babeljs.io/docs/usage/polyfill/

jide
When using ES6, you can use the spread operator with array-like objects like this :
```
const args = [...arguments];
const nodes = [...document.querySelectorAll('div')];
```
You can even use this with Sets, a cool trick to make an array unique :
```
const myUniqueArray = [...new Set(myArray)];
```

Aleksander Nowodziński

Instead of spread you could use rest operator:

function something( ...args ) {
  // Array['yes', 1, {}]
}
something('yes', 1, {});

Paul Fitzgerald

Is the section “Convert String to Array” definitely correct?

When I check the console I see the below:

'JavaScript'.split('')
Array [ "J", "a", "v", "a", "S", "c", "r", "i", "p", "t" ]
Array.from('JavaScript');
Array [ "JavaScript" ]

Espen
That’s actually a bit funny. If you run that code in dev tools opened from this article, the Array.from function is overwritten by MooTools, and no longer works like the “native” version.
```
Array.from = function(e) {
    return null  == e ? [] : o.isEnumerable(e) && "string" != typeof e ? "array" == t(e) ? e : s.call(e) : [e]
}
```
Run it in a new browser window and it should work.
freginold
Paul, did the same thing for me, but if I run the code somewhere else (tried it on repl.it) it works just as it’s supposed to.

David Walsh
What he said…old MooTools has it wrong. I’ll be removing MooTools and all frameworks from the site soon.
Peter Bengtsson
I built a site in reactjs with es6 recently. Standard stack (these days).
The damn thing wouldn’t work on old Android browsers and certain browser in WebPageTest. “TypeError: function is undefined” (or something like that).

Turns out these old browsers choked on the first occurrence of Array.from().

Adding babel-polyfill made my day.
Roni
What about performance, which one is the best approach??

Eric Guittiere
Looks like
```
Array.prototype.slice.call(arraylike);
```
is the fastest option (in Chrome and Firefox).
```
[...arraylike]
```
and
```
Array.apply(0, arraylike);
```
are second or third depending (different results in Chrome and FF), and unfortunately
```
Array.from(arraylike);
```
is the slowest by far on both browsers… :(

Array.From

Convert NodeList to Array

Convert arguments to Array

Convert String to Array

Recent Features

Introducing MooTools Templated

CSS Gradients