JS Array Sort

JavaScript Array Sort: In-Place Sorting & Custom Comparators

The sort() method sorts array elements in-place. By default, sort() converts elements to strings and compares their UTF-16 code unit values, which produces unexpected sorting order for numbers unless a custom comparator function is provided.

Array Sorting Workflow

flowchart TD
    SortCall["arr.sort(comparator)"] --> HasComp{"Is comparator function provided?"}
    HasComp -- "No Comparator" --> StringSort["Converts elements to Strings & compares lexicographically ('10' < '2')"]
    HasComp -- "Comparator (a, b)" --> CompLogic{"Evaluates (a, b)"}
    CompLogic -- "< 0" --> AFirst["a comes before b"]
    CompLogic -- "> 0" --> BFirst["b comes before a"]
    CompLogic -- "=== 0" --> KeepOrder["Original relative order preserved"]

Sorting Methods Summary (ES2023)

Practical Code Example

// Demonstrating default sorting traps, comparator logic, and non-mutating toSorted

// 1. Default String Sorting Trap on Numbers
const numbers = [10, 5, 40, 25, 100, 1];
const defaultSorted = [...numbers].sort();
console.log("Default Sort (String Lexicographical Trap):", defaultSorted); 
// Output: [1, 10, 100, 25, 40, 5] (Incorrect for numeric values!)

// 2. Numeric Sorting with Custom Comparator (a - b)
const numericAscending = [...numbers].sort((a, b) => a - b);
console.log("Numeric Ascending Sort:", numericAscending); // [1, 5, 10, 25, 40, 100]

const numericDescending = [...numbers].sort((a, b) => b - a);
console.log("Numeric Descending Sort:", numericDescending); // [100, 40, 25, 10, 5, 1]

// 3. Sorting Array of Objects by Property
const inventory = [
  { name: "Laptop", price: 1200 },
  { name: "Mouse", price: 25 },
  { name: "Monitor", price: 300 }
];

inventory.sort((a, b) => a.price - b.price);
console.log("Inventory sorted by price:", inventory);

// 4. Non-Mutating ES2023 toSorted()
const originalList = ["Banana", "Apple", "Cherry"];
const sortedCopy = originalList.toSorted();
console.log("Original Array (Unchanged):", originalList);
console.log("Sorted Copy:", sortedCopy);

Best Practices & Gotchas

• Always Provide a Comparator for Numbers: Never call .sort() on arrays of numbers without (a, b) => a - b.
• Use toSorted() in Immutable Architectures: Use ES2023 toSorted() to avoid mutating input props or state arrays in frameworks like React.
• String Locale Comparison: For non-ASCII strings or accented characters, use a.localeCompare(b) inside your comparator function.

Self-Check Challenge

Write a custom comparator function to sort an array of string names alphabetically, taking accented characters (e.g. "Álvaro", "Zoe") into account properly.