Reordering Methods

Functions

Objects

Array Properties and Methods

DOM

Built-in Objects

Using Events in JavaScript

Handling Input and Output

Ajax and JSON

Two methods deal directly with the reordering of items already in the array: reverse() and sort(). As one might expect, the reverse() method simply reverses the order of items in an array. Take this code for example:

var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); //5,4,3,2,1

Here, the array’s values are initially set to 1, 2, 3, 4, and 5, in that order. Calling reverse() on the array reverses the order to 5, 4, 3, 2, 1. This method is fairly straightforward but doesn’t provide much flexibility, which is where the sort() method comes in.

By default, the sort() method puts the items in ascending order — with the smallest value first and the largest value last. To do this, the sort() method calls the String() casting function on every item and then compares the strings to determine the correct order. This occurs even if all items in an array are numbers, as in this example:

var values = [0, 1, 5, 10, 15];
values.sort();
alert(values); //0,1,10,15,5

Even though the values in this example begin in correct numeric order, the sort() method changes that order based on their string equivalents. So even though 5 is less than 10, the string “10” comes before “5” when doing a string comparison, so the array is updated accordingly. Clearly, this is not an optimal solution in many cases, so the sort() method allows you to pass in a comparison function that indicates which value should come before which. A comparison function accepts two arguments and returns a negative number if the first argument should come before the second, a zero if the arguments are equal, or a positive number if the first argument should come after the second. Here’s an example of a simple comparison function:

function compare(value1, value2) {
  if (value1 < value2) {
    return -1;
  }
  else {
    return 1;
  }
}

A much simpler version of the comparison function can be used with numeric types, and objects whose valueOf() method returns numeric values (such as the Date object). In either case, you can simply subtract the second value from the first as shown here:

function compare(value1, value2){
  return value2 - value1;
}

Because comparison functions work by returning a number less than zero, zero, or a number greater than zero, the subtraction operation handles all of the cases appropriately. This comparison function works for most data types and can be used by passing it as an argument to the sort() method, as in the following example:

var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //0,1,5,10,15

When the comparison function is passed to the sort() method, the numbers remain in the correct order. Of course, the comparison function could produce results in descending order if you switch the return values like this:

function compare(value1, value2) {
  if (value1 < value2) {
    return -1;
  } 
  else {
    return 1;
  }
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //15,10,5,1,0

In this modified example, the comparison function returns 1 if the first value should come after the second and –1 if the first value should come before the second. Swapping these means the larger value will come first and the array will be sorted in descending order. Of course, if you just want to reverse the order of the items in the array, reverse() is a much faster alternative than sorting.

Examples

Create an array of elements and reverse the array.

var values = [12, 45, 32, 6, 86];
values.reverse();

Create an array of numbers and sort it in ascending order.

var numbers = [21,7,34,776,27,18];
function compare(a, b){
  return a - b;
}
numbers.sort(compare);

Create an array of numbers and sort it in descending order.

var numbers = [21,7,34,776,27,18];
function compare(a, b){
  return b - a;
}
numbers.sort(compare);

Create an array of strings and sort it in ascending order.

var fruits = ['banana', 'guava', 'apple', 'pineapple', 'orange'];
fruits.sort();

Create an array of strings and sort it in descending order.

var fruits = ['banana', 'guava', 'apple', 'pineapple', 'orange'];
fruits.sort();
fruits.reverse();