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

Array.From

By  on  

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    MooTools TwitterGitter Plugin

    Everyone loves Twitter. Everyone loves MooTools. That's why everyone should love TwitterGitter, a MooTools plugin that retrieves a user's recent tweets and allows the user to format them however the user would like. TwitterGitter allows the user to choose the number of...

  • By
    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...

Discussion

  1. 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/

  2. 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)];
  3. Aleksander Nowodziński

    Instead of spread you could use rest operator:

     function something( ...args ) { // Array['yes', 1, {}] } something('yes', 1, {});
  4. 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.

  5. David Walsh

    What he said…old MooTools has it wrong. I’ll be removing MooTools and all frameworks from the site soon.

  6. 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.

  7. 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… :(

  8. Wanderson
     var a = Array.from({ length: 26 }, (a, i) => String.fromCharCode(97 + i));