As I’ve previously discussed, arrays are variables with infinite “slots” for data. These slots can be filled from all kinds of sources: selections of DOM elements, random numbers, text, etc. It’s very common to loop over this data to perform some operation, but it’s also common to extract or insert more data, or to trim the array. That’s what push, pop, shift and unshift are for.

Data as Candy

Perhaps the easiest way to understand these methods is to visualize an array as Pez candy. For those unfamiliar with Pez, it loads “sticks” of candies into the bottom of a dispenser; pulling back on the lever at the top (commonly sculpted into a head) extracts a candy. Extending this scenario, an array would start at the bottom of the Pez dispenser, and end at the top.

Let’s imagine we have a simple array of words in an array called pez:

pez = [ "cherry", "grape", "lemon", "mango", "orange"];

pop

Popping the array is equivalent to pulling back on the head at the top of the Pez dispenser; it extracts the last value from the array. In the console:

pez.pop();
> "orange"

Just like the real-life candy, popping the value removes it from the original array. pez is left as:

> "cherry", "grape", "lemon", "mango"

Repeated popping would eventually reduce the array to a length of 0.

To get the last item in an array non-destructively (i.e. without altering the original array) simply use its length minus 1 (since all arrays index from 0):

pez[pez.length-1];
> "orange"

shift

shift() is just like pop(), but at the start of the array: imagine sliding open the Pez magazine and pulling out the first candy from the bottom of the stack. Therefore:

pez.shift();
> "cherry"

Again, shift() will remove the extracted element from the array, shortening it.

Getting the first value non-destructively is as easy as referencing “slot” zero in the array:

pez[0];
> "cherry"

unshift

Rather than extracting elements from the start of the array, unshift() does the opposite; it inserts values at the start. Returning to the original array:

pez = [ "cherry", "grape", "lemon", "mango", "orange"];

If we wanted to add three flavours at the beginning, we could do the following:

pez.unshift("raspberry","boysenberry","strawberry");
> 8

This equivalent to opening the Pez magazine and inserting candies at the bottom of the stack.

unshift automatically returns the length of the new array. pez now consists of:

["raspberry", "boysenberry", "strawberry", "cherry", "grape", "lemon", "mango", "orange"]

push

push() is like unshift(), but at the end of the array, rather than beginning. (Imagine pulling back the head of the Pez dispenser, but rather than extracting a candy, jamming new ones into the top). Returning once more to the original array:

pez = [ "cherry", "grape", "lemon", "mango", "orange"];

Adding two new values at the end:

pez.push("eucalyptus","chlorophyll");
> 7

Again, the new length of the array is returned; pez is now:

> [ "cherry", "grape", "lemon", "mango", "orange", "eucalyptus", "chlorophyll" ]

While they are very useful, it can be difficult at first to see how push, pop, shift and unshift are very practical. But if you stick with this series, I’ll soon show some powerful applications of each in production code.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.