Understanding Javascript's Array Sort

#javascript #arrays #codenewbie #tips

When working with data it is a good idea to have the data sorted in some type of meaningful way. Luckily for Javascript developers, the language comes with a built in sort method that can be used on arrays. Great — so why are we here? While the sort method is great on standard strings, there are few gotchas that may trip up some developers. The goal of this article is to cover some of the common gotchas and to cover the basics of this array method.

How The Method Works

By default, the sort method will return a sorted array in ascending order based on their UTC-16 code unit values. This is done by converting each element of the array into a string.

Note: This does not return a copy, it will sort the original array.

Here it is in action on an array of lowercased elements

let colors = ["orange","green","blue","red"]
console.log(colors.sort()) // ["blue", "green", "orange", "red"]

Pretty straight forward so far, but since the default behavior of sort is to convert the elements to strings, then sort it in ascending order based on their UTC-16 code unit values, we'll run into some issues if our elements change even in the slightest way.

// element(s) is/are capitalized
let colors = ["orange","Green","blue","red"]
console.log(colors.sort()) // ["Green", "blue", "orange", "red"]

let numbers = [10,60,6,1,5,55,14]
console.log(numbers.sort()) // [1, 10, 14, 5, 55, 6, 60]

let people = [{name: "mark", age: 22},{name: "jill", age: 10},{name: "anthony", age: 16}]
console.log(people.sort())
// [{ name: "mark", age: 10 },{ name: "jill", age: 16 },{ name: "anthony", age: 22 }]

What I haven't mentioned yet is that the sort method takes in an optional parameter, a compare function, that you can pass to it to define the sort order of the array, which will prevent the method from converting all of the elements to strings, and then sorting those converted "strings".

How the Optional compareFunction Parameter Works

When a compareFunction is given, the elements are sorted based on what is returned by the compareFunction. It goes like this — if...:

compareFunction(a, b) returns less than 0: the index of a will be set lower than b
compareFunction(a, b) returns 0: nothing changes, already sorted
compareFunction(a, b) returns greater than 0: the index of a will be set higher than b

The general idea of the compareFunction is this:


function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

So at this point we know that a regular sort without a compareFunction will do just fine, but what about for situations where we have numbers or objects?

In comes the compareFunction....

Examples with numbers :

function sortByLength(a, b) {
    return a.length - b.length
}

function compareNumbers(a,b){
    return a - b
}

let strings = ["hello","hi","hey"]
console.log(strings.sort(sortByLength)) // ["hi","hey","hello"]

let numbers = [10,60,6,1,5,55,14]
console.log(numbers.sort(compareNumbers)) // [1, 5, 6, 10, 14, 55, 60]

Example with objects:

function sortByName(a,b){
    // ignore upper/lowercase by setting all elements to lowercase
    let nameA = a.name.toLowerCase()
  let nameB = b.name.toLowerCase()
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }
  return 0;
}

function sortByAge(a,b){
    return a.age - b.age
}

let people = [{name: "mark", age: 22},{name: "JILL", age: 10},{name: "anthony", age: 16}]

console.log(people.sort(sortByName))
// [{name: "anthony", age: 16}, {name: "JILL", age: 10}, {name: "mark", age: 22}]

console.log(people.sort(sortByAge))
// // [{name: "JILL", age: 10}, {name: "anthony", age: 16}, {name: "mark", age: 22}]

Note: if you copy and paste this code, you'll have to avoid running the console.logs back to back — it will execute too quickly and you'll end up seeing the objects sorted by age back to back, instead of the objects sorted by name then sorted by age. Basically run the first console.log to confirm the output of objects sorted by name, then run the second console.log to confirm the objects sorted by age.