Over a million developers have joined DZone.

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

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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)

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

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

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}