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!

Recent Features

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    Create a Spinning, Zooming Effect with CSS3

    In case you weren't aware, CSS animations are awesome.  They're smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects...

  • By
    MooTools onLoad SmoothScrolling

    SmoothScroll is a fantastic MooTools plugin but smooth scrolling only occurs when the anchor is on the same page. Making SmoothScroll work across pages is as easy as a few extra line of MooTools and a querystring variable. The MooTools / PHP Of course, this is a...

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.

    • There’s a babel plug-in for Array.from()

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

  2. 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. Instead of spread you could use rest operator:

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

    • 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. What he said…old MooTools has it wrong. I’ll be removing MooTools and all frameworks from the site soon.

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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!