Free email newsletter: “ES.next News

2013-05-30

JavaScript quirk 8: array-like objects

[This post is part of a series on JavaScript quirks.]

Some objects in JavaScript look like arrays, but aren’t. They are called array-like. This blog post looks at what exactly that means and how to best work with those objects.

Array-like objects

An array-like object
  • has: indexed access to elements and the property length that tells us how many elements the object has.
  • does not have: array methods such as push, forEach and indexOf.
Two examples of array-like objects is the result of the DOM method document.getElementsByClassName() (many DOM methods return array-like objects) and the special variable arguments [1]. You can determine the number of arguments via
 arguments.length
And you can access a single argument, e.g. read the first argument:
 arguments[0]
Array methods, however, have to be borrowed. You can do that, because most of those methods are generic.

Generic methods

A generic method does not require this to be an array, it only requires this to have length and indexed element access. Normally, you invoke a method m on an array arr as follows.
 arr.m(arg0, arg1, ...)
All functions have a method call that allows you to perform the above invocation differently:
 Array.prototype.m.call(arr, arg0, arg1, ...)
The first argument of call is the value for this that m receives (in this case, arr). Because we access m directly and not via arr, we can now hand any this to that method. For example, arguments:
 Array.prototype.m.call(arguments, arg0, arg1, ...)

Examples

Let’s continue with a concrete example. The following function printArgs logs all arguments that it receives.
    function printArgs() {
        Array.prototype.forEach.call(arguments,
            function (arg, i) {
                console.log(i+'. '+arg);
            });
    }
We have used method forEach generically. printArgs in use:
    > printArgs()
    > printArgs('a')
    0. a
    > printArgs('a', 'b')
    0. a
    1. b
You can even apply generic methods to ordinary objects:
    > var obj = {};
    > Array.prototype.push.call(obj, 'a');
    1
    > obj
    { '0': 'a', length: 1 }
In the above case, property length did not exist and was automatically created, with the initial value zero.

Converting an array-like object to an array

Sometimes the best way to work with an array-like object is to convert it to an array. That can also be done via a generic method:
 Array.prototype.slice.call(arguments)
Compare: to create a copy of an array arr, you make the method call
 arr.slice()

Reference

  1. JavaScript quirk 5: parameter handling

2013-05-29

The beginning of infinity in JavaScript

Infinity begins relatively early in JavaScript:
    > Math.pow(2, 1024)
    Infinity
    > Math.pow(2, 1023)
    8.98846567431158e+307
What is going on here?

2013-05-23

Plans for supporting Web Components in AngularJS and Ember.js

Web Components [1] are an upcoming standard for custom HTML5 user interface elements. Those UI elements will eventually become interchangeable between frameworks. Now the people behind AngularJS and Ember.js have described their plans for supporting Web Components.

JavaScript quirk 7: inadvertent sharing of variables via closures

[This post is part of a series on JavaScript quirks.]

Closures are a powerful JavaScript feature: If a function leaves the place where it was created, it still has access to all variables that existed at that place. This blog post explains how closures work and why one has to be careful w.r.t. inadvertent sharing of variables.

2013-05-18

Google’s Polymer and the future of web UI frameworks

Updates: At Google I/O 2013, Google presented a new web user interface (UI) framework called Polymer. The way it works is indicative of the future of all web UI frameworks.

2013-05-15

JavaScript quirk 6: the scope of variables

[This post is part of a series on JavaScript quirks.]

In most programming languages, variables only exist within the block in which they have been declared. In JavaScript, they exist in the complete (innermost) surrounding function:

    function func(x) {
        console.log(tmp); // undefined
        if (x < 0) {
            var tmp = 100 - x;  // (*)
            ...
        }
    }

2013-05-14

Netflix’s technology and hiring practices

In the article “Netflix, Reed Hastings Survive Missteps to Join Silicon Valley's Elite”, Ashlee Vance profiles Netflix and its CEO Hastings for Businessweek. The article mentions a few interesting tidbits about the company’s technology and hiring practices:

2013-05-11

JavaScript history: undefined

Two tweets by Brendan Eich shed light on the history of JavaScript having both undefined and null [1].

2013-05-10

Beyond “always on”

Current technology encourages us to be continuously connected. This blog post predicts that that will change.

2013-05-08

Pets in wheelchairs

Cute: two pets lost their ability to use their hind legs, so their owners built them wheelchairs.

2013-05-05

JavaScript quirk 5: parameter handling

[This post is part of a series on JavaScript quirks.]

The basics of parameter handling in JavaScript are simple, advanced tasks require manual work. This blog post first looks at the basics and then covers advanced topics.