Sorting Without Library

The content of this article is also available in video format.

How do you sort an array in JavaScript without using a library?

At first glance, it seems simple enough:

js
const result = ['cat', 'axe', 'ball'].sort();
console.log(result); // ['axe', 'ball', 'cat']

js
const result = ['cat', 'axe', 'ball'].sort();
console.log(result); // ['axe', 'ball', 'cat']

But things getting slightly unexpected when we do that with number:

js
const result = [5, 10, 2, 100].sort();
console.log(result); // [10, 100, 2, 5]

js
const result = [5, 10, 2, 100].sort();
console.log(result); // [10, 100, 2, 5]

Many would solve this by providing a comparator function:

js
const result = [5, 10, 2, 100].sort((a, b) => a - b);
console.log(result); // [2, 5, 10, 100]

js
const result = [5, 10, 2, 100].sort((a, b) => a - b);
console.log(result); // [2, 5, 10, 100]

What about this?

js
const result = ['Item 5', 'Item 10', 'Item 2'].sort();
console.log(result); // ['Item 10', 'Item 2', 'Item 5']

js
const result = ['Item 5', 'Item 10', 'Item 2'].sort();
console.log(result); // ['Item 10', 'Item 2', 'Item 5']

Answer: Intl.Collator. A class designed for string comparison.

js
const collator = new Intl.Collator('en', { numeric: true });
const result = ['Item 5', 'Item 10', 'Item 2'].sort(collator.compare);
console.log(result); // ['Item 2', 'Item 5', 'Item 10']

js
const collator = new Intl.Collator('en', { numeric: true });
const result = ['Item 5', 'Item 10', 'Item 2'].sort(collator.compare);
console.log(result); // ['Item 2', 'Item 5', 'Item 10']

Sorting Without Library

You may also like:

Bookmarklet

Assert console.error call times when mocking it

Function constructor can be used as safe alternative to eval