Jan 27, 2023
Sorting Without Library
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']
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]
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]
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']
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']
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']