More Handy JavaScript - Array push() and pop()

The other day I was work on my AIR application, and I came across a need for an Array function in JavaScript that was similar to the ColdFusion function ArrayAppend(), that would add a new value to the end of an Array. Then I remembered something my brother told me about push() and pop() in Java.

So I looked into it, and sure enough, JavaScript arrays have the push() and pop() methods. I did not know this. I'm sure some JavaScript gurus are shaking their heads at my lack of such simple knowledge, but regardless, I did not know. And since I did not know, perhaps some others might not either, so I thought I would share.

Array push()

If you are familiar with ColdFusion arrays, which most people reading this blog probably are, then you are likely familiar with the ArrayAppend() function. It is a function I use a lot. It is very handy for simply adding something to the end of an array without having to go to the trouble of determining the current length of the array and then adding the new item at the index of length+1.

JavaScript has a similar method built into the Array Object itself, called push().


// Create a new Array
var myArray = new Array();

// Add a value to the last position of the array
myArray.push("This value will be appended to the Array");

// Add a value to the last position of the array
myArray.push("Now this value will be appended to the Array");

// Should output both values as a comma-delimited list
alert(myArray.toString());

The first value I set will be added at index 0 of the array. The second, at index 1. Any subsequent push() will continue appending the values to the end of the array. Pretty cool and pretty simple.

Array pop()

The pop() method of the Array object in JavaScript does the opposite of the push() method. Just as push() adds something to the end of an array, pop() removes something from the end of an array.

You can think of push() and pop() as a Last-In-First-Out situation. pop() will only remove the last item from the array and push will only add an item to the end. Also, you ca use pop() without fear. Using it on an empty array does not throw an error.

And actually, pop() serves double-duty, because not only does it remove the last item from the array, but it also returns that value.


// Create a new Array
var myArray = new Array();

// Push 5 values into the array
myArray.push("1");
myArray.push("2");
myArray.push("3");
myArray.push("4");
myArray.push("5");

// Should output the string "1,2,3,4,5"
alert(myArray.toString());

// Remove the last value and assign it to a variable
myValue = myArray.pop();

// Should output the string "1,2,3,4"
alert(myArray.toString());

// Should output the value "5"
alert(myValue);

Conclusion

Like I said, this might come as a surprise to no one. But hopefully someone will learn something new about JavaScript, as I have. There is a lot more functionality in the Array Object as well.

Comments
Dan Vega's Gravatar Push & Pop are pretty common among many languages, not quite sure CF did not go the same route.
# Posted By Dan Vega | 4/24/09 9:46 AM
radekg's Gravatar A few more interesting:
shift(), unshift(), slice(), concat().
BTW, why:

var array = new Array() and not var array = [];
?
# Posted By radekg | 4/24/09 9:51 AM
Jason Dean's Gravatar @Dan - Yeah, I was noticing as I was browsing that they seem to be common.

@radekg - Verbosity == Clarity. When I am making code examples, Clarity it always the most important thing. n00bs might not understand what var myArray = []; means. It may seem plain as day to you, but I know when I was first learning some of these seemingly simple concepts, things like that would throw me.
# Posted By Jason Dean | 4/24/09 10:08 AM
Toon's Gravatar "then adding the new item at the index of length+1..."
=> adding the new item at the index of length, not length + 1

if you have 3 items in your array, like this: var array = ['a', 'b', 'c'];
and if you want to add an item you must add it at array[array.length].
# Posted By Toon | 6/15/09 3:10 PM
Jason Dean's Gravatar You're right! I usually work with CFML which is not 0-based. So we do need to do length+1. I just wasn't thinking. Thanks for the correction. However, push() still seems like a better option.
# Posted By Jason Dean | 6/16/09 1:16 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.9.1. Contact Blog Owner