JavaScript Sort Arrays

Sorting data is essential for organizing and retrieving information efficiently. JavaScript provides several array sorting methods that make it easy to arrange data in various ways, such as alphabetical, numeric, and random orders. These methods are versatile and can be used to sort simple values as well as objects with more complex structures.

JavaScript Array Sorting Methods

1. Alphabetical Sort

By default, JavaScript’s .sort() method arranges array elements in alphabetical order. For numbers, however, it may not work as expected without a sorting function.

1
2
3
const fruits = ["Banana", "Apple", "Cherry"];
fruits.sort();
console.log(fruits); // Outputs: ["Apple", "Banana", "Cherry"]

2. sort()

The sort() method sorts an array in place. By default, it converts items to strings and sorts them in alphabetical order, so additional logic is required for numeric sorting.

1
2
3
const animals = ["Dog", "Cat", "Elephant"];
animals.sort();
console.log(animals); // Outputs: ["Cat", "Dog", "Elephant"]

3. reverse()

The reverse() method reverses the order of elements in an array. This is often used in combination with sort() to get a reverse alphabetical order.

1
2
3
const fruits = ["Banana", "Apple", "Cherry"];
fruits.sort().reverse();
console.log(fruits); // Outputs: ["Cherry", "Banana", "Apple"]

4. toSorted()

The toSorted() method (recently introduced) returns a new array with sorted elements, leaving the original array unchanged.

1
2
3
4
const colors = ["Blue", "Red", "Green"];
const sortedColors = colors.toSorted();
console.log(sortedColors); // Outputs: ["Blue", "Green", "Red"]
console.log(colors);       // Original remains unchanged

5. toReversed()

The toReversed() method creates a new array with elements in reverse order, without modifying the original array.

1
2
3
const colors = ["Blue", "Red", "Green"];
const reversedColors = colors.toReversed();
console.log(reversedColors); // Outputs: ["Green", "Red", "Blue"]

JavaScript Numeric Sort

When sorting numbers, JavaScript’s sort() method requires a compare function to handle numeric sorting properly. Without this, numbers are sorted as strings, resulting in incorrect order.

1
2
3
const numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => a - b); // Ascending numeric sort
console.log(numbers); // Outputs: [1, 5, 10, 25, 40, 100]

To sort numbers in descending order, use (b - a) in the compare function.

1
2
numbers.sort((a, b) => b - a); // Descending numeric sort
console.log(numbers); // Outputs: [100, 40, 25, 10, 5, 1]

JavaScript Sort Objects

Sorting arrays of objects requires a custom compare function based on one of the object’s properties, making it useful for arranging complex data.

1
2
3
4
5
6
7
8
9
const people = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 20 }
];

// Sort by age in ascending order
people.sort((a, b) => a.age - b.age);
console.log(people);

This outputs:

1
2
3
4
5
[
  { name: "Charlie", age: 20 },
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
]

Random Sorting

To randomize an array, use the sort() method with a random compare function.

1
2
3
const numbers = [1, 2, 3, 4, 5];
numbers.sort(() => Math.random() - 0.5);
console.log(numbers); // Outputs array in random order

Finding Min and Max Values in Arrays

JavaScript’s Math.min() and Math.max() methods can find the smallest or largest number in an array. To use these with an array, combine them with the spread operator.

1
2
3
const numbers = [40, 100, 1, 5, 25, 10];
let min = Math.min(...numbers); // Outputs: 1
let max = Math.max(...numbers); // Outputs: 100

Summary of JavaScript Array Sorting Methods

• Alphabetical and Reverse Sort: Use sort() and reverse() for strings and basic reverse ordering.
• Numeric Sort: Provide a custom compare function for sorting numbers.
• Sorting Objects: Use sort() with a compare function to sort by object properties.
• Random Sort: Use a random compare function with sort() to shuffle arrays.
• Min and Max Values: Use Math.min() and Math.max() with the spread operator to find extremes.