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).
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();
shift() – remove the first item
With shift()
we can remove the first item.
clashAlbums.shift();
So the debut eponymous album ‘The Clash’ is removed.
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');
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!’.
If the code was:
clashAlbums.splice(3, 1, 'Black Market Clash');
Then as well as ‘Black Market Clash’ being inserted ‘Sandinista!’ would be removed.
sort() – sort in ascending order
Unfortunately sort()
is not as straight-forward as you would think. Yes, it is fine with strings:
clashAlbums.sort();
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
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.
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});
reverse() – reverse the order of items
Thankfully reverse
is nice and straight-forward it just reverses the entire contents of the array.
clashAlbums.reverse();
You’ll find more about arrays regarding basics, split/join and new shiny methods.