Is Array(5) equivalent to var a = []; a.length = 5; in JS?

Question

I see four five options to initialize an array to a specific length in JS, (the last one is a stretch, I know):

var a = []; a.length = 5;

var a = Array(5);

var a = []; a[4] = undefined;

var a = new Array(5);

function makeArrayToLength(length, default){
    var a = [], i = 0;
    for(; i < length; i++){
        a[i] = default;
    }
    return a;
}

I definitely want to (and do) use the literal whenever possible, but I'm in a situation where the defining aspect of a particular array is its length, so I'm leaning towards Array(5). Is the first example equivalent to the second in terms of end result? I realize it's not equivalent in the execution.

Solution 1

The first two, and the third examples are equivalent, at the end they produce an Array object with only one own property, length, containing 5 as its value.

When you call the Array constructor using a single numeric argument (like Array(5);), the newly created object will contain that number as its length property, the index properties aren't created:

var a = Array(5);
a.hasOwnProperty('0'); // false

The second example produces just the same:

var a = [];
a.length = 5;
a.hasOwnProperty('0'); // false

About the third example, it isn't equivalent because it will create a property on the array object, even though its value is undefined:

var a = []; a[4] = undefined;
a.hasOwnProperty('4'); // true

The fourth example:

var a = new Array(5);

Is just exactly the same as the second one (var a = Array(5);), there's no difference between using the Array constructor with or without the new operator, in the second example you are calling the Array constructor as a function.

And finally, about your makeArrayToLength function, by now I think you know isn't equivalent at all, since all the "index properties" are initialized to a "default" value. _{(BTW don't use default as Identifier, it's a Keyword...)}

The Array constructor is usually avoided because it can have different behaviors depending the argument used, for example:

Array("5"); // one element array, (["5"])
Array(5);   // empty array, length = 5
// v.s.
["5"]       // one element array
[5]         // one element array

Also, the Array constructor could be overriden, while array literals will always work.

Solution 2

Yes, they all produce the same result.

2 and 4 are the same because, according to the ECMAScript spec:

15.4.1 The Array Constructor Called as a Function When Array is called as a function rather than as a constructor, it creates and initialises a new Array object. Thus the function call Array(...) is equivalent to the object creation expression new Array(...) with the same arguments.

1 and 2 are equivalent because [] constructs a new array and setting the length property is equivalent to constructing an Array with new Array(length) (in the spec).

Option 3 is also equivalent because:

...whenever a property is added whose name is an array index, the length property is changed, if necessary, to be one more than the numeric value of that array index

And option 5 is basically just option 3, but repeated multiple times up to the maximum index.

Comments

[Hamish]

you know you could throw me an upvote if you're going to incorporate bits of my answer into yours.

[Christian C. Salvadó]

@Hamish, sorry but I didn't "incorporated bits of your answer" in mine, I've just edited to expand my answer (in fact I didn't noticed your answer until I finished editing), and is not the first time I talk about calling built-in constructors as functions :), but yes, I think your answer deserves an upvote...

[Christian C. Salvadó]

+1, Just note that option 3 isn't strictly equivalent in terms of the resulting object (even if this may not be important for practical use), because obviously, a property named '4' is created in the object, while with the other options (1,2,4) doesn't happen, the only own property on the resulting object is length, the "index properties" are not created...

[Hamish]

Sorry if there was a misunderstanding - for some reason I thought you had used the same link, but might have just misread. This answer is very thorough :)

[Christian C. Salvadó]

@Hamish, thanks :). No problem, BTW if you are interested, there are several HTML versions of the spec, they are really useful: by Mallonée, by Orendorff and by Smith

[Andrew]

@Hamish, HA! didn't realize that default was reserved, as I was writing the question on the fly. Thanks for the really thorough post, and I'm sorry for having you recap what has been answered (i.e. the differences) numerous times on this site. At this point, could you say which method of initialization is best in an allocation-type situation (for example, this array NEEDS it's length to be 5, even if empty)? By best I suppose I mean a compromise between best-practice and most explicit for six months later :).