FacebookTwitter

Javascript Array Push

By on Nov 2, 2014 in Interesting, JavaScript

Share On GoogleShare On FacebookShare On Twitter

Pushing elements into an array in Javascript

Javascript Array Push push() method appends a new item to the last of an array. This is very useful, it allows you to add elements to an array fast an easy, something that you will find yourself doing a lot in javascript web programming.

Javascript arrays are indexed at 0, with the last element on the array having an index one less than the length of the array. So if you had three elements on one array and wanted to access the second element you will have to reference it by its index, equal to its position minus one, [2-1]=1.

?View Code JAVASCRIPT
1
2
3
4
var arr = ['item one', 'item two', 'item three'];
console.log(arr[0]);              // prints 'item one'
console.log(arr[1]);              // prints 'item two'
console.log(arr[arr.length - 1]); // prints 'item three'

In essence, array push() as mentioned above appends an element to the end of the array, so you can picture it like this:

?View Code JAVASCRIPT
1
this[this.length] = element;

Javascript Array Push VS Reference by Index

However, it appears to actually be less efficient that what is represented above. According to  Javascript Style Guide, you should always use index when possible as they will outperform array push. In an experiment performed by Steven Hall, Steven proved google’s guidelines to be accurate, as his results showed that using index was after all was faster than using javascript array push method.

However, this experiment was performed about 4 years ago, when browsers did not have the technology they have today. So in more recent times the results will vary. In modern browser the difference will be unnoticeable. However, the when it comes to mobile it is a different story. With mobile devices browsers reference by index will out perform javascript array push, since most mobile devices browsers are not as powerful as an actual computer browser. Again it will not be a noticeable difference maybe with one or two javascript array push, but add a few and you will start noticing the deference vs using index.

This might seems like an irrelevant topic, why go down to the details of javascript array push? But given the importance of adding and removing elements from an array in programming in general, it is worth considering alternative ways if they will mean faster execution. Sure one javascript array push will not harm your code at all, but any useful web app or plugin requires more than just one array push. If you are concerned about writing cross-browser compatible code you should keep this in mind. Sure in modern browsers it will not make a huge difference, but remember that there are tons of people out there that unfortunately do not update very often for whatever reason, some don’t even know how to, and others are constrain by a work environment that forbids them from updating any software. So if you could optimize a small piece of you code that will be used in tons of places throughout your app or plugin, which will make it run faster in modern and old browsers why not do it, after all it is very simple.

Enmanuel Corvo

Enmanuel Corvo

Software Engineer at LiveAnswer
Enmanuel Corvo is a Software Engineer experienced in Web Applications Development. Huge fan of WordPress and an active plug-in author who enjoys writing code and blog posts about anything related to technology.
Enmanuel Corvo

Latest posts by Enmanuel Corvo (see all)