7 Jan 2012

Should I Split or Should I Join Now or Should I Array I Should I Go Now.

Oh dear. Shoehorning the Clash to a Javascript tutorial – phew rock ‘n’ roll.

Arrays are a neat way of moving and manipulating data. To create an array in Javascript the syntax is as follows:


var clashAlbums=new Array();
clashAlbums[0]="The Clash";
clashAlbums[1]="Give 'em Enough Rope";
clashAlbums[2]="London Calling";
clashAlbums[3]="Sandinista!";
clashAlbums[4]="Combat Rock";

Or if you prefer:


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

We could reference one element of the array as follows:


clashAlbums[2];
/* would output "London Calling" */

If you a are PHP developer you’ll probably be aware of the array functions implode() and explode(). In PHP implode() turns an array into a string and explode() turns a string into an array. In Javascript join() turns an array into a string and split() turns a string into an array. Lets see these chaps in action.

The join() method of an array takes one parameter – the character you wish to use as a separator in your string. For example the following would create a comma separated list.


clashAlbums.join(",");

If we were wanting to have each item appear in HTML on a new line you could therefore use:


clashAlbums.join("<br>");

The example below uses ‘vanilla’ javascript’s getElementById and innerHTML to output the array.

JSFIDDLE Demo

Alternatively you could output using jQuery by attaching the output to an element with the jQuery html() method as follows:


$("#display").html(clashAlbums.join("<br>"));

JSFIDDLE Demo

So that leaves split(). Split does the reverse of join() – it creates an array from a string. Take the following:


var clashAlbumsString = "The Clash,Give 'em Enough Rope,London Calling,Sandinista!,Combat Rock";

We have a string and we can use split() to convert it into an array. All we need is a suitable separator. In this example the string has been set up with commas as separators. So to convert the above string to an array we use:


var clashAlbums = clashAlbumsString.split(",");

… where ‘clashAlbums’ is the name of our array.

JSFIDDLE Demo

It has to be said in my experience join() is the more useful of the two, but it is good to know you can have two way traffic. One job where join() helps an awful lot is when you have to manipulate data that you get sent from your best mate Jason … sorry JSON.

concat()

Related to split and join is concat(). This allows us to add / concatenate two arrays together.

We have our Clash albums.

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

We’ll now create a list of Big Audio Dynamite albums ie:

var badAlbums=new Array("This is Big Audio Dynamite","No. 10, Upping St","Tighten Up, Vol. '88","Megatop Phoenix");

… and then concatenate them into a new array:

var mickJonesAlbums=clashAlbums.concat(badAlbums);

JSFIDDLE Demo

You’ll find more about arrays regarding basics, traditional methods and newer methods.

Leave a Comment