A Pop and Push and this land is ours

With Javascript arrays there are a host of methods allowing us to manipulate the content. We’ll start with the ‘traditional’ array methods.

pop() – to remove the last element

Given an array of:

var clashAlbums=new Array("The Clash","Give 'em Enough Rope","London Calling","Sandinista!","Combat Rock");

We can pop() the last value with:

var poppedVal = clashAlbums.pop();
console.info(poppedVal);

… and that would be ‘Combat Rock’ (their second best album in my humble opinion).

JSFIDDLE Demo

push() – to add an element at the end

We can add a new element into the end of array with push().

clashAlbums.push('Cut the Crap');

If we want to see the new value we’ll use join.

document.getElementById('display').innerHTML = clashAlbums.join();

JSFIDDLE Demo

shift() – remove the first item

With shift() we can remove the first item.

clashAlbums.shift();

So the debut eponymous album ‘The Clash’ is removed.

JSFIDDLE Demo

unshift() – add item(s) to the beginning

Next unshift() does the opposite of shift by adding a new item at the beginning.

clashAlbums.unshift('Clash on Broadway');

JSFIDDLE Demo

splice() – add or remove by index

Sometimes you don’t want to add/remove from the end/beginning but elsewhere in the depths of the array and so it is nice to splice(). With splice() you indicate the index you wish to target (remember starting from 0), the number of items to remove (use 0 if you dont’ want to remove any) and then list the element or elements you want to add in. So the following:

clashAlbums.splice(3, 0, 'Black Market Clash');

… will add the compilation album ‘Black Market Clash’ in after ‘London Calling’ – which fact fans is chronologically correct. Note the use of 0 as we don’t want to remove ‘Sandinista!’.

JSFIDDLE Demo

If the code was:

clashAlbums.splice(3, 1, 'Black Market Clash');

Then as well as ‘Black Market Clash’ being inserted ‘Sandinista!’ would be removed.

JSFIDDLE Demo

sort() – sort in ascending order

Unfortunately sort() is not as straight-forward as you would think. Yes, it is fine with strings:

clashAlbums.sort();

JSFIDDLE Demo

But is a little bit problematic with numbers – as it treats all elements as strings. Therefore an array of numbers such as:

var myScores = new Array(450, 11, 3, 10, 242, 99);

Will sort as:

10,11,242,3,450,99

JSFIDDLE Demo

Help is at hand though because we can add a comparison function as a parameter of sort() that allows for endless permutations. To sort ascendingly we can amend are example as follows:

var myScores = new Array(450, 11, 3, 10, 242, 99);
myScores.sort(function(a,b){return a-b});

The function compares each pairs of numbers and if a is bigger than b then b gets moved towards the front of the array.

JSFIDDLE Demo

If you want your numbers in descending order then use:

var myScores = new Array(450, 11, 3, 10, 242, 99);
myScores.sort(function(a,b){return b-a});

JSFIDDLE Demo

reverse() – reverse the order of items

Thankfully reverse is nice and straight-forward it just reverses the entire contents of the array.

clashAlbums.reverse();

JSFIDDLE Demo

You’ll find more about arrays regarding basics, split/join and new shiny methods.

Leave a Comment