How to Sort Arrays in JavaScript

CraigBuckler

 

By: Craig Buckler

In this tutorial, we’ll discuss how you can sort arrays in JavaScript. Sorting an array of values is a key development technique applied in a variety of situations.

 

Consider the following array of integers defined in a JavaScript array:

 

 

// define array
var myarray = [30, 2, 1, 9, 15];

 

We can use the standard array sort() method to rearrange the values into logical order:

// sort array
myarray.sort();
console.log(myarray);

What result will be output?

The result may surprise you. While you would expect [1, 2, 9, 15, 30], the actual output is a seemingly random [1, 15, 2, 30, 9].

The reason is logical once you understand how the sort() method operates. An array may contain numerous types of value; integers, real numbers, strings, objects, etc. When the sort() method is used without a parameter, every value is converted to a string representation and sorted in lexicographic order, e.g. “15” will come before “2” because the first character – “1” – is lower than “2”. Similarly, “Banana” will appear before “apple” because an uppercase “B” is lower than “a” in the character set.

Comparison Functions

While string comparison has uses, it’s not the result we need. Fortunately, the array sort() method can be passed a comparison function as a parameter.

The comparison function expects two parameters – a and b – which are values from the array being sorted. The function must return a numeric value:

  • if a is greater than b, the returned value must be positive (above zero)
  • if a is smaller than b, the returned value must be negative (below zero)
  • if a and b are equivalent, the returned value must be zero

You can therefore define a function to sort an array of numbers from lowest to highest value:

function SortLowToHigh(a, b)  {
if (a > b) return 1;
else if (a < b) return -1;
else return 0;
}

This can be simplified since subtracting b from a will also return a valid comparison value:

function SortLowToHigh(a, b)  {
return a – b;
}

The SortLowToHigh comparison function can be passed to the array sort method:

var myarray = [30, 2, 1, 9, 15];
myarray.sort(SortLowToHigh);
console.log(myarray);

Note: do not add () brackets after SortLowToHigh; we are providing a reference to that function rather than calling it.

The array is now sorted as we expect: [1, 2, 9, 15, 30].

Inline Functions

If a comparison is used multiple times in your code, it’s practical to create a named function such as SortLowToHigh above.

However, functions in JavaScript are first-class objects and can be used like any other variable. Therefore, if we wanted to sort an array from the highest to lowest value but only required it once in our code, we can pass an anonymous function to the sort() method:

// sort highest to lowest
myarray.sort( function(a,b) { return b – a; } );

Sophisticated Sorting

The comparison function provides incredible flexibility and we can sort arrays of variables or objects using any criteria. For example, we can define named map locations as objects in an array:

// home co-ordinates
var home = { name: “home”, x:0, y:0 };
// map co-ordinates
var map = [
{ name: “shops”, x:3, y:4 },
{ name: “library”,     x:5, y:3 },
{ name: “pub”,   x:1, y:2 }
];

Sorting the map array by the object ‘name’ can be achieved using a comparison function which references that property:

// sort map locations by name
map.sort(
function (a, b) { return (a.name>b.name ? 1 : a.name<b.name ? -1 : 0); }
);
// library, pub, shops
console.log(map);

Or we could sort locations by their shortest distance from any location. First, we’ll define a simple function which uses Pythagoras to calculate the distance between two co-ordinate objects:

// distance between two locations
function Distance(loc1, loc2) {
return Math.sqrt(
Math.pow(loc1.x – loc2.x, 2) + Math.pow(loc1.y – loc2.y, 2)
);
};

This can then be used within a simple comparison function to determine the closest locations from ‘home’ (0, 0):

// sort by shortest distance
map.sort(
function (a, b) { return Distance(home, a) – Distance(home, b); }
);
// pub, shops, library
console.log(map);

Alternatively, we could permit the user to enter any location in an HTML form:

<form id=”point”>
X: <input id=”locx” type=”number” />
Y: <input id=”locy” type=”number” />
<button>Calculate</button>
</form>
<p id=”output”>Please enter your location.</p>

then intercept their form submission and calculate the closest map point:

var
form = document.getElementById(“point”),
locx = document.getElementById(“locx”),
locy = document.getElementById(“locy”),
output = document.getElementById(“output”);
// intercept form submission
form.onsubmit = function(e) {
// define user’s location
var loc = { name: “user”, x: locx.value || 0, y: locy.value || 0 };
// sort
map.sort(
function (a, b) { return Distance(loc, a) – Distance(loc, b); }
);
// output
output.textContent = “Your closest location is the ” + map[0].name;
// cancel submit
e.preventDefault();
return false;
};

Summary

At first glance, the array sort() method seems too simplistic for practical use. However, the comparison function is powerful and permits sorting by any criteria. It’s just JavaScript code so it can be as complex as you need, e.g. it could load external data using Ajax techniques, compare against geo-location co-ordinates, react to the browser window size, etc.

Try writing sort comparison functions in your own projects. Further array lessons and exercises are available in my Learning JavaScript Programming video course.

 

 

Comments

comments

Save $50 when you sign up for an annual Learning Library account Learn More