JavaScript Sort: A Complete Guide to Array Sorting

Understanding the JavaScript sort() Method

The sort() method is a built-in Array method in JavaScript that arranges the elements of an array in a specified order. Unlike other array methods that return new arrays, sort() modifies the original array in place and returns a reference to the same array.

Default Behavior

The default behavior of sort() is to arrange elements as strings in ascending order, based on UTF-16 code unit values. This means that when you sort an array of strings, they're arranged alphabetically from A to Z.

Key Point: This string-based sorting can produce unexpected results when working with numbers, since "10" comes before "2" in string comparison.

For more details on how JavaScript handles comparisons, see the MDN documentation on Array.prototype.sort().

Sorting Strings

When you call sort() on an array of strings, JavaScript arranges them alphabetically by default. This works well for most use cases involving text data.

Case-Insensitive Sorting

The default string sorting is case-sensitive, meaning uppercase letters are sorted before lowercase letters. To sort strings regardless of their case, use localeCompare() which provides sophisticated string comparison capabilities:

const names = ['alice', 'Bob', 'charlie', 'Alice'];
names.sort((a, b) => a.localeCompare(b));
// Output: ['alice', 'Alice', 'Bob', 'charlie'] - case-insensitive

The localeCompare() method is particularly valuable because it respects locale-specific ordering rules and handles accented characters intelligently. This is essential when building internationalized web applications that serve users across different regions and languages. Understanding how string methods work together helps you build more robust data handling pipelines.

Sorting Numbers

Important: Sorting numbers requires a compare function because the default string-based sorting doesn't work as expected.

Without a compare function: [1, 30, 4, 21, 100000].sort() produces [1, 100000, 21, 30, 4] because each number is converted to a string first.

Ascending vs Descending Order

• Ascending: (a, b) => a - b
• Descending: (a, b) => b - a

Understanding these patterns is fundamental to working with JavaScript arrays effectively in your web applications. For more complex data transformations, combining sort with JSON parsing helps you prepare data for display.

Sorting Arrays of Objects

In modern web development, you frequently work with arrays of objects. To sort by an object property, access that property in your compare function.

Basic Object Property Sorting

Use localeCompare() for string properties and subtraction for numeric properties:

const products = [
 { name: 'Laptop', price: 999 },
 { name: 'Phone', price: 599 },
 { name: 'Tablet', price: 399 }
];

// Sort by price ascending
products.sort((a, b) => a.price - b.price);
// Output: Tablet ($399), Phone ($599), Laptop ($999)

Multiple Property Sorting

Chain comparisons when sorting by multiple criteria. This technique is commonly used in e-commerce web development for product filtering and sorting features. When working with dynamic data, you might also use queryselector to gather elements and then sort them programmatically.

Sorting Dates

Date sorting requires converting date strings into comparable values using the Date constructor:

const events = [
 { name: 'Event A', date: '2023-01-01' },
 { name: 'Event B', date: '2022-12-31' },
 { name: 'Event C', date: '2023-06-15' }
];

events.sort((a, b) => new Date(a.date) - new Date(b.date));
// Output: Event B (Dec 31), Event A (Jan 1), Event C (Jun 15) - chronological order

This approach is essential for building event calendars, activity feeds, and dynamic web applications that display time-based content. Combined with array methods like filter and map, you can build powerful data manipulation pipelines.

Best Practices and Common Pitfalls

The In-Place Modification

The sort() method modifies the original array. If you need to preserve the original order, create a copy first:

const original = [3, 1, 4, 1, 5];
const sorted = [...original].sort((a, b) => a - b);
// original remains: [3, 1, 4, 1, 5]
// sorted becomes: [1, 1, 3, 4, 5]

Using the spread operator to create a copy is essential for maintaining immutable data patterns in modern JavaScript frameworks like React.

Handling Edge Cases

• undefined and null values are placed at the end
• Handle missing properties with default values using logical OR (||)
• Keep compare functions simple for better performance

Quick Reference

Sources

1. MDN Web Docs: Array.prototype.sort()
2. W3Schools: JavaScript Array Sort
3. CoreUI: Sort Array of Objects