Sorting JavaScript Arrays: A Beginner’s Guide

Sorting JavaScript Arrays is a fundamental skill every developer needs to master. Sorting allows you to arrange data in a specific order, which is crucial for tasks like organizing lists, displaying data in a user-friendly way, and implementing efficient search algorithms.

In this post, we’ll dive into different methods for sorting arrays in JavaScript, providing practical examples tailored for beginners.

Understanding the Default Behavior of Array.sort()

By default, the Array.prototype.sort() method sorts elements as strings in ascending order. This can lead to unexpected results when working with numbers or complex data types.

const numbers = [10, 5, 20, 2];
numbers.sort();
console.log(numbers); // Output: [10, 2, 20, 5] - incorrect for numeric sorting

In the above example, the method converts elements to strings and compares their Unicode code points. That explains why “2” comes before “5” even though numerically, 2 is smaller.

To fix this, you need to provide a comparison function.

Sorting Numbers

When sorting numbers, the default behavior won’t work correctly as seen in the example above. Here’s how you can fix that using a comparison function:

const numbers = [10, 5, 20, 2];

// Ascending order
numbers.sort(function(a, b) {
    return a - b;
});
console.log(numbers); // Output: [2, 5, 10, 20]

// Descending order
numbers.sort(function(a, b) {
    return b - a;
});
console.log(numbers); // Output: [20, 10, 5, 2]

The comparison function subtracts one number from another, effectively sorting them numerically.

In the first example, sorting in ascending order, a - b ensures smaller numbers come first. In the second example, b - a reverses the order, resulting in a descending sort.

Tip for Beginners: Remember that sort() modifies the original array. If you need to keep the original array intact, make a copy using slice() or the spread operator (...) before sorting.

Non-Mutating Sort with toSorted()

Introduced in ES2023, Array.prototype.toSorted() is the non-mutating alternative to sort(). Instead of modifying the original array, it returns a new sorted array.

const numbers = [10, 5, 20, 2];

// Original array stays unchanged
const sorted = numbers.toSorted((a, b) => a - b);
console.log(sorted);  // Output: [2, 5, 10, 20]
console.log(numbers); // Output: [10, 5, 20, 2] - unchanged

This is especially useful in frameworks like React, where immutability matters. You no longer need to manually copy the array with slice() or the spread operator before sorting.

toSorted() accepts the same comparison function as sort(), so everything you learn about comparison functions applies to both methods. It is supported in all modern browsers and Node.js 20+.

Sorting Strings

For strings, sort() works well by default, but for better handling of case and special characters, use localeCompare. This ensures locale-aware sorting and handles variations like accents.

const fruits = ['Banana', 'apple', 'Cherry'];

// Sorting alphabetically using localeCompare
fruits.sort(function(a, b) {
    return a.localeCompare(b);
});
console.log(fruits); // Output: ['apple', 'Banana', 'Cherry']

Case-Insensitive Sorting

You can ignore case sensitivity by passing options:

const cities = ['berlin', 'Amsterdam', 'Zurich', 'amsterdam'];

// Sorting alphabetically with case-insensitive comparison
cities.sort(function(a, b) {
    return a.localeCompare(b, undefined, { sensitivity: 'base' });
});
console.log(cities); // Output: ['Amsterdam', 'amsterdam', 'berlin', 'Zurich']

Faster String Sorting with Intl.Collator

When sorting large arrays of strings, Intl.Collator offers significantly better performance than calling localeCompare() on every comparison. The collator initializes locale settings once and reuses them, making it up to 40-60x faster for large datasets.

const collator = new Intl.Collator('en', { sensitivity: 'base' });
const cities = ['berlin', 'Amsterdam', 'Zurich', 'amsterdam'];

cities.sort(collator.compare);
console.log(cities); // Output: ['Amsterdam', 'amsterdam', 'berlin', 'Zurich']

For small arrays, the difference is negligible. But if you’re sorting hundreds or thousands of items, Intl.Collator is the recommended approach.

Tip for Beginners: Use localeCompare or Intl.Collator for reliable string sorting across languages. For large lists, prefer Intl.Collator for better performance.

Check out this comprehensive guide on JavaScript strings if you’re looking to dive deeper.

Sorting Objects

Often, you’ll need to sort arrays of objects by a specific property. Here’s how you can do it:

const products = [
  { name: 'Apple', price: 30 },
  { name: 'Banana', price: 20 },
  { name: 'Cherry', price: 25 }
];

// Sorting by price in ascending order
products.sort(function(a, b) {
    return a.price - b.price;
});
console.log(products);
/* Output:
[
  { name: 'Banana', price: 20 },
  { name: 'Cherry', price: 25 },
  { name: 'Apple', price: 30 }
]
*/

Sorting objects by a specific property is a common task when working with structured data. In the example above, the sort() method uses a comparison function to access the price property of each object.

You can modify the comparison logic to sort by different properties or in descending order, providing flexibility for various data manipulation needs.

Learn more about working with objects in JavaScript in our introduction to JavaScript objects.

Sorting Objects by Multiple Keys

Sometimes you need to sort by a primary key and then by a secondary key when values are equal. For example, sorting products by price first, then alphabetically by name:

const products = [
  { name: 'Cherry', price: 25 },
  { name: 'Apple', price: 25 },
  { name: 'Banana', price: 20 }
];

products.sort(function(a, b) {
    // First, compare by price
    if (a.price !== b.price) {
        return a.price - b.price;
    }
    // If prices are equal, compare by name
    return a.name.localeCompare(b.name);
});
console.log(products);
/* Output:
[
  { name: 'Banana', price: 20 },
  { name: 'Apple', price: 25 },
  { name: 'Cherry', price: 25 }
]
*/

This pattern works because JavaScript’s sort() is stable (since ES2019). Equal elements keep their relative order, so the secondary sort is preserved correctly.

Dynamic Sorting Based on Property

What if you want to sort by different properties dynamically? Here’s a generic function for dynamic sorting:

function dynamicSort(property) {
  return function(a, b) {
    if (a[property] < b[property]) return -1;
    if (a[property] > b[property]) return 1;
    return 0;
  };
}

products.sort(dynamicSort('name')); // Sorting by name
console.log(products);

Dynamic sorting allows you to sort an array of objects by any specified property, making your code more reusable and adaptable. The dynamicSort function returns a comparator that sorts objects based on the property argument.

This approach is particularly useful when you need to sort data by different criteria – such as sorting products by name, price, or other attributes – without rewriting the sorting logic.

Tip for Beginners: Always validate the property name in dynamic sorting to avoid runtime errors when the property doesn’t exist.

Natural Sorting

For lists that include numbers in their names (e.g., file names), natural sorting ensures correct ordering:

const files = ['file10.txt', 'file2.txt', 'file1.txt'];

// Sorting with numeric comparison
files.sort(function(a, b) {
    return a.localeCompare(b, undefined, { numeric: true });
});
console.log(files); // Output: ['file1.txt', 'file2.txt', 'file10.txt']

Sorting Dates

Sorting arrays of dates can be straightforward using Date objects:

const dates = [new Date(2022, 5, 1), new Date(2021, 11, 25), new Date(2023, 1, 15)];

// Sorting dates in ascending order
dates.sort(function(a, b) {
    return a - b;
});
console.log(dates);
/* Output:
[
  Sat Dec 25 2021,
  Wed Jun 01 2022,
  Wed Feb 15 2023
]
*/

Practical Use Cases

Sorting is a powerful tool in various real-life scenarios. Below are examples to demonstrate its application in different contexts.

1. Sorting a Table

Sorting is frequently used to organize table data dynamically. Here’s a simple example of sorting a table by column:

<table id="productTable">
  <tr><th>Name</th><th>Price</th></tr>
  <tr><td>Apple</td><td>30</td></tr>
  <tr><td>Banana</td><td>20</td></tr>
  <tr><td>Cherry</td><td>25</td></tr>
</table>

<button onclick="sortTable(1)">Sort by Price</button>

function sortTable(columnIndex) {
  const table = document.getElementById('productTable');
  const rows = Array.from(table.rows).slice(1); // Exclude header row
  rows.sort(function(a, b) {
    const aText = a.cells[columnIndex].innerText;
    const bText = b.cells[columnIndex].innerText;
    return parseInt(aText) - parseInt(bText);
  });

  rows.forEach(function(row) {
    table.appendChild(row); // Reattach sorted rows
  });
}

This example uses DOM manipulation to reorder table rows after sorting them in JavaScript.

2. Sorting Exam Scores

Teachers often need to sort exam scores to rank students. Here’s how it can be done:

const scores = [85, 92, 78, 95, 88];

// Sorting in descending order
scores.sort(function(a, b) {
    return b - a;
});
console.log(scores); // Output: [95, 92, 88, 85, 78]

3. Organizing Event Dates

Sorting event dates helps in managing schedules efficiently. Here’s an example:

const events = [
  { name: 'Conference', date: '2024-12-01' },
  { name: 'Meeting', date: '2024-11-25' },
  { name: 'Workshop', date: '2024-12-10' }
];

// Sorting events by date in ascending order
events.sort(function(a, b) {
    return new Date(a.date) - new Date(b.date);
});
console.log(events);
/* Output:
[
  { name: 'Meeting', date: '2024-11-25' },
  { name: 'Conference', date: '2024-12-01' },
  { name: 'Workshop', date: '2024-12-10' }
]
*/

Sorting helps automate data organization, which is essential for creating efficient and user-friendly applications.

4. Filtering and Sorting Product Inventory

In e-commerce, sorting products by price or rating is crucial. Here’s a simple example:

const products = [
  { name: 'Laptop', price: 1500 },
  { name: 'Smartphone', price: 800 },
  { name: 'Tablet', price: 600 }
];

// Sorting by price in ascending order
products.sort(function(a, b) {
    return a.price - b.price;
});
console.log(products);
/* Output:
[
  { name: 'Tablet', price: 600 },
  { name: 'Smartphone', price: 800 },
  { name: 'Laptop', price: 1500 }
]
*/

5. Prioritizing Tasks

In a to-do application, sorting tasks by priority can improve productivity. Here’s how:

const tasks = [
  { task: 'Do laundry', priority: 3 },
  { task: 'Finish project', priority: 1 },
  { task: 'Grocery shopping', priority: 2 }
];

// Sorting tasks by priority in ascending order
tasks.sort(function(a, b) {
    return a.priority - b.priority;
});
console.log(tasks);
/* Output:
[
  { task: 'Finish project', priority: 1 },
  { task: 'Grocery shopping', priority: 2 },
  { task: 'Do laundry', priority: 3 }
]
*/

FAQs

Common questions about sorting JavaScript arrays:

Conclusion

Sorting arrays is an essential skill in JavaScript, enabling you to organize and manipulate data effectively. By mastering the use of sort() and toSorted() with various data types and understanding comparison functions, you can build more dynamic and responsive applications.

Regular practice will improve your coding efficiency and problem-solving skills, helping you tackle real-world challenges with confidence. Feel free to share your questions and comments! 🙂