Borislav Hadzhiev
Mon Feb 21 2022·3 min read
Photo by Chester Wade
Use the sort()
method to sort an array in TypeScript, e.g.
numArray.sort((a, b) => a - b)
. The sort
method takes a function that
defines the sort order as a parameter. The function has to be provided when
sorting a numeric array, but is optional when sorting string arrays.
// ✅ for Numbers const numArray: number[] = [15, 4, 1, 8]; const result1 = numArray.sort((a, b) => a - b); console.log(result1); // 👉️ [1, 4, 8, 15] // ✅ for Strings const strArray: string[] = ['z', 'c', 'a', 'f']; const result2 = strArray.sort(); console.log(result2); // 👉️ ['a', 'c', 'f', 'z'] // ✅ For Objects const objArray: { num: number }[] = [ { num: 15 }, { num: 4 }, { num: 1 }, { num: 8 }, ]; const result3 = objArray.sort((obj1, obj2) => { if (obj1.num > obj2.num) { return 1; } if (obj1.num < obj2.num) { return -1; } return 0; }); console.log(result3); // 👉️ [{num: 1}, {num: 4}, {num: 8}, {num: 15}]
We used the Array.sort method to sort a numeric and string array in TypeScript.
Note that the sort()
method sorts the elements of the array in place and
returns the sorted array. In other words, it mutates the original array.
const numArray: number[] = [15, 4, 1, 8]; const result1 = numArray.sort((a, b) => a - b); console.log(result1); // 👉️ [1, 4, 8, 15] console.log(numArray); // 👉️ [1, 4, 8, 15]
If you want to sort the arrays without mutating them, use the spread syntax
(...) to create a shallow copy before calling the sort()
method.
// ✅ for Numbers const numArray: number[] = [15, 4, 1, 8]; const result1 = [...numArray].sort((a, b) => a - b); console.log(result1); // 👉️ [1, 4, 8, 15] console.log(numArray); // 👉️ [15, 4, 1, 8] // ✅ for Strings const strArray: string[] = ['z', 'c', 'a', 'f']; const result2 = [...strArray].sort(); console.log(result2); // 👉️ ['a', 'c', 'f', 'z'] console.log(strArray); // 👉️ ['z', 'c', 'a', 'f']
We used the
spread syntax (...)
to unpack the values of the array into a new array before calling the sort
method.
When sorting a numbers array, we have to pass a function to the sort()
method,
whereas with strings - we don't.
The parameter we passed to the method in the first example is a function that defines the sort order.
sort
method, the array elements get converted to strings and sorted according to their UTF-16 code unit values.The last example shows how to sort an array of objects.
// ✅ For Objects const objArray: { num: number }[] = [ { num: 15 }, { num: 4 }, { num: 1 }, { num: 8 }, ]; const result3 = objArray.sort((obj1, obj2) => { if (obj1.num > obj2.num) { return 1; } if (obj1.num < obj2.num) { return -1; } return 0; }); console.log(result3); // 👉️ [{num: 1}, {num: 4}, {num: 8}, {num: 15}]
The sort()
method uses the following logic to sort the elements in the array:
If the return value of the compare function is greater than 0
, then sort b
before a
.
If the return value of the compare function is less than 0
, then sort a
before b
.
If the return value of the compare function is equal to 0
, keep the original
order of a
and b
.
You can use the same approach to sort an array of objects by a string property.
// ✅ For Objects const objArray: { str: string }[] = [ { str: 'z' }, { str: 'c' }, { str: 'a' }, { str: 'f' }, ]; const result3 = objArray.sort((obj1, obj2) => { if (obj1.str > obj2.str) { return 1; } if (obj1.str < obj2.str) { return -1; } return 0; }); console.log(result3); // 👉️ [{str: 'a'}, {str: 'c'}, {str: 'f'}, {str: 'z'}]