JavaScript Sort Array Guide

Sorting arrays is a common task in JavaScript. The built-in sort method makes it easy. But it has some quirks. This guide will help you master it.

We will cover the basics first. Then we will handle numbers, strings, and objects. You will see clear examples with code and output.

How the sort Method Works

The sort method sorts the elements of an array in place. It returns the sorted array. By default, it sorts elements as strings. This can cause unexpected results with numbers.

Let's look at a simple example.

// Default sort converts elements to strings
const fruits = ['banana', 'apple', 'cherry'];
fruits.sort();
console.log(fruits);

[ 'apple', 'banana', 'cherry' ]

This works well for strings. But watch what happens with numbers.

// Numbers are converted to strings
const numbers = [40, 100, 1, 5, 25];
numbers.sort();
console.log(numbers);

[ 1, 100, 25, 40, 5 ]

The order is wrong. The number 100 comes before 25. This is because "100" is less than "25" as a string.

Using a Compare Function

To sort numbers correctly, you need a compare function. This function defines the sort order. It takes two arguments, often called a and b.

The compare function should return:

• A negative number if a should come before b.
• Zero if a and b are equal.
• A positive number if a should come after b.

Here is the standard way to sort numbers ascending.

// Ascending sort with compare function
const numbers = [40, 100, 1, 5, 25];
numbers.sort(function(a, b) {
    return a - b;
});
console.log(numbers);

[ 1, 5, 25, 40, 100 ]

For descending order, reverse the subtraction.

// Descending sort
const numbers = [40, 100, 1, 5, 25];
numbers.sort(function(a, b) {
    return b - a;
});
console.log(numbers);

[ 100, 40, 25, 5, 1 ]

Sorting Strings

Strings sort alphabetically by default. But case matters. Uppercase letters come before lowercase ones. Use localeCompare for a case-insensitive sort.

// Case-insensitive string sort
const fruits = ['Banana', 'apple', 'Cherry'];
fruits.sort(function(a, b) {
    return a.localeCompare(b);
});
console.log(fruits);

[ 'apple', 'Banana', 'Cherry' ]

To sort in reverse alphabetical order, swap a and b.

// Reverse alphabetical order
const fruits = ['banana', 'apple', 'cherry'];
fruits.sort(function(a, b) {
    return b.localeCompare(a);
});
console.log(fruits);

[ 'cherry', 'banana', 'apple' ]

Sorting Arrays of Objects

You often need to sort an array of objects by a property. Use a compare function that accesses that property.

Here is an example sorting people by age.

// Sort objects by a numeric property
const people = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'Bob', age: 35 }
];
people.sort(function(a, b) {
    return a.age - b.age;
});
console.log(people);

[
  { name: 'Jane', age: 25 },
  { name: 'John', age: 30 },
  { name: 'Bob', age: 35 }
]

For string properties, use localeCompare.

// Sort objects by a string property
const people = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'Bob', age: 35 }
];
people.sort(function(a, b) {
    return a.name.localeCompare(b.name);
});
console.log(people);

[
  { name: 'Bob', age: 35 },
  { name: 'Jane', age: 25 },
  { name: 'John', age: 30 }
]

Sorting with Arrow Functions

Arrow functions make the code shorter. They are great for simple compare functions.

// Using arrow functions
const numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers);

[ 1, 5, 25, 40, 100 ]

For objects, the syntax is clean too.

// Arrow function with objects
const people = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 }
];
people.sort((a, b) => a.age - b.age);
console.log(people);

[
  { name: 'Jane', age: 25 },
  { name: 'John', age: 30 }
]

Sorting Without Mutating the Original Array

The sort method changes the original array. To avoid this, create a copy first. Use the spread operator or slice.

// Sort a copy to preserve original
const numbers = [40, 100, 1];
const sorted = [...numbers].sort((a, b) => a - b);
console.log('Original:', numbers);
console.log('Sorted:', sorted);

Original: [ 40, 100, 1 ]
Sorted: [ 1, 40, 100 ]

Common Mistakes

One common mistake is forgetting the compare function for numbers. Another is expecting sort to return a new array. It returns the same array, sorted.

Also, be careful with floating point numbers. The subtraction method works, but rounding errors can occur. For most cases, it is fine.

Performance Tips

The sort method is efficient. It uses a stable sort algorithm in modern browsers. For large arrays, avoid complex compare functions. Keep them simple.

If you need to sort by multiple properties, chain comparisons. Here is an example sorting by age, then by name.

// Sort by multiple properties
const people = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
    { name: 'Bob', age: 30 }
];
people.sort((a, b) => {
    return a.age - b.age || a.name.localeCompare(b.name);
});
console.log(people);

[
  { name: 'Jane', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'John', age: 30 }
]

This technique is powerful. It sorts by age first. If ages are equal, it sorts by name.

Related Guides

Sorting is just one part of working with arrays. For a broader view, check out our JavaScript Array Methods Guide. It covers map, filter, reduce, and more.

Also, understanding array variables is key. Read the JavaScript Array Variables Guide for best practices on creating and managing arrays.

Conclusion

The sort method is a powerful tool. Always use a compare function for numbers. Use localeCompare for strings. Sort objects by their properties. Remember to copy arrays if you need the original order.

Practice with the examples above. You will soon sort arrays with confidence. Happy coding!