Is there a reason JavaScript developers don't use Array.push()?

Question

I commonly see developers use an expression like the following in JavaScript:

arr = []
arr[arr.length] = "Something"
arr[arr.length] = "Another thing"

Wouldn't push be more appropriate?

arr = []
arr.push("Something")
arr.push("Another thing")

Answer 1

I actually asked myself the same question at the start of this year. UPDATED with new test cases http://jsperf.com/array-push-vs-unshift-vs-direct-assignment/2

It appears that push is much faster in chrome, and about equal in FF. Also direct is faster in IE9, but I would be interested to see how it performs in IE10.

I would say that most developers would assume setting the length of the array, and then using direct assignment is faster, as is the case with most programming languages. But JavaScript is different. Javascript arrays aren't really arrays, they're just key/value maps just like all other JavaScript objects. So the pre-allocation is essentially falling on deaf ears.

Personally I prefer push (:

Answer 2

I believe that it's mostly habit.

Some developers use it simply because it's the way they are used to do it, and haven't considered that push would be an alternative.

Some developers have learned once upon a time that one method is much faster than another, and haven't reviewed this in light of the recent performance improvements of the Javascript engines.

Personally I use push frequently. Most of the time readability and maintainability is more important than performance, at least when the performance impact is small enough. The performance tests posted in the answers here show that the performance difference between various methods isn't very big.

Answer 3

Very often when I'm pushing an object into an array, I want the reference to that object to be returned to me. For example:

// Returns object
function createAndAdd(arr) {
  return arr[arr.length] = { id: 1 };
} 
var obj = createAndAdd(arr);

Now I have the new object and I've added it to an array. If I'd used push then I would have been returned the length of the array. It would look like the following:

function createAndAdd(arr) {
  var obj = { id: 1 };
  arr.push(obj);
  return obj;
}

or even uglier, especially if the object gets big:

function createAndAdd(arr) {
  return arr[arr.push({ id: 1 }) -1];
}

Personally, I love functions with immediate return statements. Keeps it simple and easy to look at. Love the question. Thanks for asking it.

Answer 4

It's a way to limit nested braclets. If you have enough of them you cant see howmany there are or howmany you need (when later looking at the code). I would use a var, one should only have to count things one time.

bar = foo.length;
foo[ bar++ ] = "new item 0";
foo[ bar++ ] = "new item 1";
foo[ bar++ ] = "new item 2";
foo[ bar++ ] = "new item 3";

http://jsfiddle.net/vEUU3/

Answer 5

I think its not about performance, or at least is not such a big deal... what really matters here is declarative way vs imperative way.

Answer 6

Array.prototype.push method returns the updated array's length while the direct declaration returns the value that is being assigned. That's the only difference I see, but I usually read some best-practices recommendations about the push method being a better way to assign new values to an array.

Answer 7

Some coders don't recommend to use array.push() cause it modify the principal object. Instead of push(), you could use the spread operator:

let arrayOne = [1, 2, 3, 4];

let arrayTwo = arrayOne;

arrayTwo.push(5);

console.log(arrayOne);
console.log(arrayTwo);

// equals to arrayOne before the push()
let arrayOneAux = [1, 2, 3, 4];

// spread operator
let arrayThree = [...arrayOneAux, 5];

console.log(arrayOneAux);
console.log(arrayThree);