Introduction
Sorting numbers in JavaScript… fun times (not really). The first time I tried it, I thought, “Okay, this should be simple.” You just call sort() and boom, done, right? Nope. I figured sorting [3, 12, 5, 1] would give me [1, 3, 5, 12]. But nope—JavaScript had other plans and handed me [1, 12, 3, 5] instead.
Took me a bit (and a lot of Googling, not gonna lie) to figure out what was going on. Turns out sort() doesn’t actually sort numbers by default—it sorts them as strings. Which… makes sense in a weird JavaScript kinda way, I guess.
Anyway, thought I’d write this down in case someone else runs into the same “what the heck” moment I had.
Default Sorting Issue
You might think sorting numbers in JavaScript is as simple as calling the sort() method on an array.
Let’s look at an example:
const numbers = [40, 100, 1, 5, 25, 10];
const sortedNumbers = numbers.sort();
console.log(sortedNumbers); [1, 10, 100, 25, 40, 5]Oh, you thought that would work? Cute. 😏 You probably expected:
[1, 5, 10, 25, 40, 100]But instead, you got something entirely different.
Why Does This Even Happen?
So here’s the deal: by default, JavaScript’s sort() method treats everything like a string. Yep, even numbers. It lines them up based on their UTF-16 code values (which is just a fancy way of saying it sorts them like words in a dictionary, not by their actual value).
That’s why you get weird results like:
- ‘1’ showing up before ’10’
- ’10’ before ‘100’
- And then ‘100’ weirdly sitting in front of ’25’
Wild, right?
How to Actually Sort Numbers (The Right Way)
If you want sort() to behave like it’s supposed to with numbers, you gotta give it a little help. To keep it simple, you give sort() a compare function that lays out the rules for which number comes before the other.
Syntax:
array.sort((a, b) => a - b);- If the result is negative, a is sorted before b.
- Else If the result is positive, b is sorted before a.
- And Finally If the result is 0, a and b remain unchanged relative to each other.
Example: Sorting Numbers in Ascending Order
const numbers = [40, 100, 1, 5, 25, 10];
const sortedNumbers = numbers.sort((a, b) => a - b);
console.log(sortedNumbers);
Output:
[1, 5, 10, 25, 40, 100]✅ Nice! Now the numbers are behaving—finally sorted like they’re supposed to.
Sorting in Descending Order
Now, let’s say you want to go in reverse and show the largest numbers first. All you have to do is swap the subtraction around in the compare function. Easy, isn’t it?
const numbers = [40, 100, 1, 5, 25, 10];
const descendingNumbers = numbers.sort((a, b) => b - a);
console.log(descendingNumbers);
Output:
[100, 40, 25, 10, 5, 1]✅ The array is now sorted in descending order.
Bonus Tip: Non-Mutating Sort (ES2023+)
What if we want to get a sorted array list without manipulating the original array? The introduction of ECMAScript 2023 allows developers to create a sorted copy of an array using toSorted() without modifying the original array.
const numbers = [40, 100, 1, 5, 25, 10];
const sortedNumbers = numbers.toSorted((a, b) => a - b);
console.log(sortedNumbers); // [1, 5, 10, 25, 40, 100]
console.log(numbers); // Original array remains unchanged!Conclusion
Sorting numbers in JavaScript doesn’t have to be confusing once you get how sort() really works under the hood. By default, it sorts things like they’re strings, which is why you sometimes get those head-scratching results when working with numbers.
The fix? Just pass in a compare function!
- Want to sort from smallest to biggest? Use (a – b).
- Want the biggest numbers first? Flip it to (b – a).
Once you’ve got that down, array sorting gets a whole lot easier.
Happy coding, and may your arrays always be in order! 🚀