JavaScript Array Sort
The sort method reorders the elements of an array, and understanding its comparison rules is essential to sorting numbers and objects correctly.
How sort works
The sort method arranges the elements of an array and returns the same array, now reordered. It is a mutating method, so the original array is changed in place. By default sort converts each element to a string and compares those strings by their character code order. This works well for words but produces surprising results with numbers, because 10 sorts before 9 when compared as text.
Default sort versus numeric sort
<!DOCTYPE html>
<html>
<body>
<h2>Default sort versus numeric sort</h2>
<script>
const letters = ["banana", "apple", "cherry"];
letters.sort();
console.log(letters); // ["apple", "banana", "cherry"]
// Default sort mishandles numbers because it compares as strings
const nums = [10, 1, 5, 25, 8];
nums.sort();
console.log(nums); // [1, 10, 25, 5, 8] -- not what we want
</script>
</body>
</html>Sorting with a compare function
To sort correctly, pass a compare function that takes two elements, a and b. If it returns a negative number, a comes first; if positive, b comes first; if zero, their order is left unchanged. For numbers, returning a - b sorts ascending and b - a sorts descending. The same technique works for objects: return the difference of the properties you want to sort by.
Numeric and object sorting
<!DOCTYPE html>
<html>
<body>
<h2>Numeric and object sorting</h2>
<script>
const scores = [10, 1, 5, 25, 8];
// Ascending
scores.sort((a, b) => a - b);
console.log(scores); // [1, 5, 8, 10, 25]
// Descending
scores.sort((a, b) => b - a);
console.log(scores); // [25, 10, 8, 5, 1]
// Sorting objects by a property
const people = [
{ name: "Ana", age: 30 },
{ name: "Ben", age: 22 },
{ name: "Cora", age: 41 }
];
people.sort((a, b) => a.age - b.age);
console.log(people.map((p) => p.name)); // ["Ben", "Ana", "Cora"]
</script>
</body>
</html>Related methods help you reorder arrays too. The reverse method flips the current order of elements, and it is often combined with sort. To sort strings case-insensitively or by locale, use localeCompare inside the compare function so that accented characters and different cases are handled sensibly.
- sort mutates the array and returns that same array.
- Without a compare function, elements are compared as strings.
- Return a - b for ascending numeric order, b - a for descending.
- reverse flips the array order in place.
- Use a.localeCompare(b) to sort strings in a language-aware way.
