Using the push method or .length when adding to array?

Question

What are the downsides to doing:

var myArray = [];
myArray[myArray.length] = val1;
myArray[myArray.length] = val2;

instead of:

var myArray = [];
myArray.push(val1);
myArray.push(val2);

I'm sure the push method is much more "acceptable", but are there any differences in functionality?

Answer 1

push is way faster, almost 300% faster.

Proof: http://jsperf.com/push-vs-length-test

Answer 2

Since arrays in JavaScript do not have holes the functionality of those two methods is equal. And yes, using .push() is much cleaner (and shorter).

Answer 3

I've generally thought length assignment was faster. Just found Index vs. push performance which backs that up; for my Chrome 14 browser anyway, over a single test run. However there is not much in it in Chrome.

Answer 4

There seems to be discrepancy on which test is faster among the varying JavaScript engines. The differences in speed may be negligible (unless an unholy amount of pushes are needed). In that case, the prudent developer should always err on the side of readability. In this case, in my opinion and the opinion of @TheifMaster is that [].push() is cleaner and it is easier to read. Maintenance of code is the most expensive part of coding.

Answer 5

As I tested, the first way is faster, I'm not sure why, keep researching. Also the ECMA doesn't mentioned which one is better, I think it is depending on how the browser vendor implements this.

var b = new Array();
var bd1 = new Date().getTime();
for(var i =0;i<1000000; i++){
    b[b.length] = i;
};

alert(new Date().getTime()- bd1);

var a = new Array();
var ad1 = new Date().getTime();
for(var i =0;i<1000000; i++){
    a.push(i);
};

alert(new Date().getTime()- ad1);

Answer 6

In JS there are 3 different ways you can add an element to the end of an array. All three have their different use cases.

1) a.push(v), a.push(v1,v2,v3), a.push(...[1,2,3,4]), a.push(..."test")

Push is not a very well thought function in JS. It returns the length of the resulting array. How silly. So you can never chain push() in functional programming unless you want to return the length at the very end. It should have returned a reference to the object it's called upon. I mean then it would still be possible to get the length if needed like a.push(..."idiot").length. Forget about push if you have intentions to do something functional.

2) a[a.length] = "something"

This is the biggest rival of a.push("something"). People fight over this. To me the only two differences are that

• This one returns the value added to the end of the array
• Only accepts single value. It's not as clever as push.

You shall use it if the returned value is of use to you.

3. a.concat(v), a.concat(v1,v2,v3), a.concat(...[1,2,3,4]), a.concat([1,2,3,4])

Concat is unbelievably handy. You can use it exactly like push. If you pass the arguments in array it will spread them to the end of the array it's called upon. If you pass them as separate arguments it will still do the same like a = a.concat([1,2,3],4,5,6); //returns [1, 2, 3, 4, 5, 6] However don't do this.. not so reliable. It's better to pass all arguments in an array literal.

Best thing with concat is it will return a reference to the resulting array. So it's perfect to use it in functional programming and chaining.

Array.prototype.concat() is my preference.

4) A new push() proposal

Actually one other thing you can do is to overwrite the Array.prototype.push() function like;

Array.prototype.push = function(...args) {
                         return args.reduce(function(p,c) {
                                              p[p.length] = c;
                                              return p
                                            }, this)
                       };

so that it perfectly returns a reference to the array it's called upon.

Answer 7

I have an updated benchmark here: jsbench.me Feel free to check which is faster for your current engine. arr[arr.length] was about 40% faster than arr.push() on Chromium 86.