There are two ways to dynamically add an element to the end of a JavaScript array. You can use the Array.prototype.push() method, or you can leverage the array’s “length” property to dynamically get the index of what would be the new element’s position.
I have provided candidate pre-screening services for recruiters in the past, and one of the classic JavaScript interview questions is: “Name two ways to dynamically append an element to a JavaScript array.” Some folks nail that question, but some are left scratching their heads. So I thought I’d quickly re-visit the logic behind this concept.
At first glance, some might say: “Well, you are the programmer. So you know how long the array is and can dynamically append an element by doing the following: foo[x] = newElement. Right?” Well, yes, but that is not what we are really trying to do.
Why Dynamically Append an Element to a JavaScript Array ?
I think that most programmers will agree that what you want in this situation is to be able to add an element to the array, regardless of the length. What you want to assume is that you will not know the length. And from a pseudo-code perspective, you want to say: “Hey, I have an array named ‘foo’ and however long it is, add this new element named ‘newElement’ to the end of it.” I think that when you can accomplish that, you have significantly more power.
Array.prototype.push() – Example # 1
In Example # 1, we used JavaScript’s Array.prototype.push() method. This wonderful little utility adds whatever you pass it to the end of the array.
The syntax is: yourArray.push(WhatYouWantToAdd)
It’s literally that simple.
Using the array’s “length” property – Example # 2
In Example #2, we leverage the “length” property of the array. The reason this works so well is that the value of an array’s “length” property will always be exactly one higher than the index of the last element in the array. Why? Because while array indexes are zero-based (i.e. the first element in the array is element 0, and the second element in the array is element # 1, and the third element is element # 2, etc…), the array’s “length’”property is a one-based value (i.e., if there are three elements in the array, the length is: 3).
So, if the array “foo” has three elements, foo[2] is the last element in the array, and the value of foo’s “length” property is “3”. Therefore, foo[3] does not exist yet (remember foo[2] is the last element).
Since we may not always know the length of the array when we need to dynamically append an element by simply adding a new element to the end, we can reference foo[.foo.length]. This way, no matter how many elements are in foo, we can simply assign the new element to foo[.foo.length].
Helpful Links for JavaScript Arrays
JavaScript for Beginners | Arrays: Adding and Removing Elements
JavaScript Array Management with Push(), Pop(), Shift() and Unshift()
Summary
There are two ways to dynamically append an element to the end of a JavaScript array. You can use the Array.prototype.push() method, or assign the new variable to the index that is equal to the array’s “length” method.
[…] Hint: Two Ways to Dynamically Append an Element to a JavaScript Arrayy […]
[…] Two Ways to Dynamically Append an Element to a JavaScript Array […]
Allright , all of that is cool, but a practical, real-word developer question here is: which method is faster and by how much (than the other one) ?
Couse if that’s just a matter of “good taste” and no performance difference, then no point wasting a brain storage on that.
When you use the Array.prototype.push() method, the JS engine takes care of all implementation details and just adds it to the end, which is lower-level code (and lower-level code is usually faster than compiled code).
When you leverage the array’s “length” property, the JS engine has to determine the length of the array, and that value is then used by the JS compiler (i.e. compiled code).
I’m sure that if you consider those two scenarios, you can imagine which one is most likely faster : – )