Sorting out JavaScript Array Sorting

Share this article

Consider the following JavaScript code:

var a = [30,2,1,9,15];a.sort();alert(a);

What would be output?If you’re expecting 1,2,9,15,30, you’ll be surprised to hear the actual result is 1,15,2,30,9. Don’t give up on JavaScript just yet; array sorting is incredibly powerful once you know how to use it.So what’s going on? When nothing is passed to the sort method, every value is converted to a string and sorted in lexicographic order, i.e. “15” will come before “2”. So will “10” and “19999999”.To fix the problem, we need to pass a comparison function to the sort() method. The function must take 2 parameters — we’ll name them a and b — and return:

  • a value less than zero if a is less than b
  • a value greater than zero if a is greater than b
  • zero if a and b are equal

The simplest numeric compare function is therefore:

function compare(a, b) {	return a - b;}

We can pass the compare function as as argument for the sort method or write it inline, e.g.

var a = [30,2,1,9,15];a.sort(function(a,b) { return a-b; });alert(a);

The output is now a far more logical 1,2,9,15,30.One of the great things about JavaScript is that our comparison functions can sort any type of object by any property. For example, we’ll define a list of locations and home co-ordinates:

// location co-ordinatesvar locations = [	{ name: "shops", x:3, y:4 },	{ name: "library", x:5, y:3 },	{ name: "pub", x:1, y:2 }];// home co-ordinatesvar home = { name: "home", x:0, y:0 };

Next, we’ll add a little Pythagoras to a function which calculates the distance between two points:

// distance between 2 co-ordinatesfunction distance(p1, p2) {	return Math.sqrt(Math.pow(p1.x-p2.x,2)+Math.pow(p1.y-p2.y,2));}

We can now sort the locations by distance from home — shortest to the furthest trip:

// sort by shortest distance homelocations.sort(	function(a, b) {		return distance(home,a)-distance(home,b);	});// locations sorted: pub, shops, library

Or we could sort by furthest to shortest distance by reversing the parameters:

// sort by furthest distance homelocations.sort(	function(b, a) {		return distance(home,a)-distance(home,b);	});// locations sorted: library, shops, pub

Or we can order location names alphabetically:

locations.sort(	function(a, b) {		if ( < return -1;		if ( > return 1;		return 0;	});// locations sorted: library, pub, shops

It’s easy to develop a range of reusable sorting functions which can be applied to any object containing similar property names. In that respect, JavaScript sorting is easier and more flexible than many other languages.

note:Want more?

If you want to read more from Craig, subscribe to our weekly tech geek newsletter, Tech Times.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form