JavaScript Sorting Explained: Numbers, Strings, and Objects

The JavaScript sort() method is one of those fundamental tools that every developer needs to master. At first glance, it seems simple enough - just call .sort() on an array and you're done, right?

Well, not quite! Let's dive deep into how this method really works and how to use it effectively.

👋 How sort () works by default ?

const fruits = ['banana', 'apple', 'cherry', 'date'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'cherry', 'date']

Works fine if the data to be sorted is a plain array of strings.

But what if the data is an array of numbers, accented characters or strings with uppercase? We will look how to sort strings with mixed case and accented characters but first lets take a look at numbers.

[10, 2, 5, 1].sort();
// Output: [1, 10, 2, 5]

Surprised right? It is because default sorting converts everything to strings. But how is the output 1, 10, 2, 5 generated? Lets break this down.

When the above numbers are converted into strings ([10, 2, 5 , 1] → [‘10’, ‘2‘, ‘5‘, ‘1‘]), JavaScript compares character by character.

"1" < "2" < "5"  ✔
but "10" starts with "1" → so it comes right after "1"

Hence, ➡️ output becomes:

[1, 10, 2, 5]

This is called lexicographical sorting (dictionary order). Just like sorting words "apple", "ball", "cat".

Lexicographic order = dictionary order
Meaning: compare character by character from left to right.

✅ Sorting numbers correctly

To sort numbers correctly, we need to use compare function.

arr.sort((a, b) => a - b);

For example:
const arr = [10, 2, 5, 1]
arr.sort((a, b) => a - b);

// Output => [1, 2, 5, 10]

🤷‍♀️ Why a - b works ?

🧠 A simple trick to remember

Positive result → swap

Negative result → no swap

Zero → no need to change anything

[10, 2, 5].sort((a, b) => a - b); // output [2, 5, 10]

------------------------------------------------------

=> 10 - 2 = 8 → positive → swap
=> 2 - 5 = -3 → negative → don’t swap
=> 5 - 10 = -5 → negative → don’t swap

→ By default, compare function sorts numbers into ascending order

[10, 2, 5, 1].sort((a, b) => a - b);

// Output => [1, 2, 5, 10]

→ To sort into descending order, we can do

[10, 2, 5, 1].sort((a, b) => b - a);
// Output => [10, 5, 2, 1]

🤞 localCompare() - a better way to sort strings

The localeCompare() method compares two strings in the current locale. To understand better, the locale refers to language + regional rules that your system/browser uses to compare and sort text.

A locale determines :

• Alphabet order

• How accented characters are treated

• Case-sensitivity rules

• Language-specific sorting differences etc.

Different languages have different sorting rules, even for the same characters. For example if we use defaul sort ()

["z", "ä", "a"].sort();

Output will be

["a", "z", "ä"]   ❌ incorrect in many languages

But using localCompare () has following advantages:

1. It respects language / region rules

["z", "ä", "a"].sort((a, b) => a.localeCompare(b));

In German (de)

["a", "ä", "z"] ✔ correct

In Swedish (sv)

["a", "z", "ä"] ✔ correct

2. Handles uppercase vs lowercase letters

    ["apple", "zoo", "Banana"].sort((a, b) => a.localeCompare(b));
    // ["apple", "Banana", "zoo"] ✔ correct alphabetical order
   

3. Consistent - always returns 1, 0 or -1

    => -1 ⇒ a comes before b ( a → b)
    =>  1 ⇒ a comes after b (b → a)
    =>  0 ⇒ they are equal
   

🔷 Sorting objects

const users = [
  { name: "Raj", age: 25 },
  { name: "Aman", age: 20 },
  { name: "Hari", age: 30 }
];

How do we sort the object based on name and age? We can do like this

// Based on age
users.sort((a, b) => a.age - b.age);
// Output => [{
  age: 20,
  name: "Aman"
}, {
  age: 25,
  name: "Raj"
}, {
  age: 30,
  name: "Hari"
}]

// Based on name
users.sort((a, b) => a.name.localeCompare(b.name))
// Output => [{
  age: 20,
  name: "Aman"
}, {
  age: 30,
  name: "Hari"
}, {
  age: 25,
  name: "Raj"
}]

🎉 Conclusion

The sort() method is extremely powerful but tricky if you don’t understand how it works internally.
Just remember the simple rule:

Default sort = converts to string

For numbers / objects = always use compare function

Thank you for reading 😊.