Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

ECMAScript.next: Array.from() and Array.of()

DZone's Guide to

ECMAScript.next: Array.from() and Array.of()

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

On July 9th, Brendan Eich announced that Rick Waldron had prototyped [1] two new methods for ECMAScript.next: Array.from() and Array.of(). Both methods are also useful in current JavaScript.

Array.from()

Array.from(arrayLike)
converts an array-like object to a true array. Source code:
    // Unary Array.from()
    Array.from = function( arrayish ) {
        return [].slice.call( arrayish );
    };
Example [1]: converting an array-like DOM result into an array.
    var divs = document.querySelectorAll("div");
    Array.from( divs ).forEach(function( node ) {
        console.log( node );
    });
Explanations:
  • Array-like objects: Some objects in JavaScript are array-like, they have indexed access and a length property like arrays, but none of the array methods. Array-like objects include the special variable arguments (giving indexed access to all arguments that were passed to a function) and most DOM results. Not having the standard array methods is especially unfortunate under ECMAScript 5, which has goodies such as Array.prototype.forEach. The canonical way of converting an array-like object to an array can be seen above. Array.from() simply makes this functionality available as a built-in method.
  • [] as a shortcut: [].foo is often used as a shortcut for Array.prototype.foo. That is, you access a prototype property via an instance. I’m not particularly fond of this shortcut, because it is less explicit and less performant (though many JavaScript engines will probably optimize this so that no new instance is created). Thus, I would have written this method as follows:
        Array.from = function(arrayLike) {
            return Array.prototype.slice.call(arrayLike);
        };
    
  • Generic methods: Some methods are generic. While they are directly available to instances of their prototype, they can also be borrowed by other instances. To borrow a generic method, one invokes one of the following two methods on it:

    • Function.prototype.call(thisValue, [arg1], [arg2], ...)
    • Function.prototype.apply(thisValue, [arrayWithArguments])

    The borrowing instance is the first argument and becomes the value of this. Generic methods have to be written so that they require this to only have a minimal set of methods. For example, most generic array methods only need this to provide length and indexed access. Array.prototype.slice is generic and allows one to turn any part of an array-like object into an array.

    Example: invoking Array.prototype.map() generically, on the array-like arguments object.

        function prefixHello(prefix) {
            return Array.prototype.map.call(arguments, function(elem) {
                return "Hello "+elem;
            });
        }
    
    Interaction:
        > prefixHello("Jane", "John")
        [ 'Hello Jane', 'Hello John' ]
    


Array.of()

Array.of([elem1], [elem2], ...)
returns elem1, elem2, etc. in an array. Source code:
    // Variable arity Array.of()
    Array.of = function() {
        return [].slice.call( arguments );
    };
Usage example:
    > Array.of("red", "green", "blue")
    [ 'red', 'green', 'blue' ]
This method is not needed very often – array literals are usually a better solution. However, when you need a constructor function (e.g. to pass it to another function) for arrays, this method is useful. That method lets you avoid a potential pitfall of the Array constructor function: If it has several arguments, it behaves like an array literal. If it has a single argument, it creates an empty array of the given length.
    > new Array(3, 4, 5)
    [ 3, 4, 5 ]
    > new Array(3)
    []
Array.of also ensures that your arrays don’t accidentally have holes (but I’m not sure that this feature is very imporant).
    > [1,,3]
    [1,,3]
    > Array.of(1,,3)
      Syntax error:
      Array.of(1,,3)
      ...........^

Related reading

  1. Array goodies from twitter rap with David Herman [refers to a tweet wrapping things up]
  2. A brief history of ECMAScript versions (including Harmony and ES.next)

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Axel Rauschmayer, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}