ArraySort in typescript

Array Sort in typescript

In this article, we will see How we can sort arrays in typescript in a typed manner

by the end of this article, you will know

How array sort works in typescript
Use of readonly array
sort function return type
case sensitive sortings
Comparer function

How array sort works in typescript

Let us see how we can sort an array in typescript.

Suppose we have an array arr mentioned below, and I want to sort it.

arr = ['vue','angular','react']

The easiest way is the [].sort function.

arr = ['vue','angular','react']
      console.log(arr.sort())
      //result
      //['angular','react','vue']

Sort function return type

So the surprising part is that the sort function has actually manipulated our original array. It does not return a new array. Instead, it reorders our original array.

Use Of ReadOnly

Let’s have a close look at result again and try to log the original array.

arr = ['vue','angular','react']
      console.log(arr.sort())
      console.log(arr)     

 //result
//['angular','react','vue']
//['angular','react','vue']

Sometimes we actually don't want to manipulate the original array. Rather, we want it to return a new array and that’s where we slice the array before the sort function.

let newarr = arr.slice().sort();
      console.log({...arr})
      console.log({...newarr})

//result
      //['vue','angular','React']
      //['React','angular','vue']

Another way to avoid manipulating the original array is to use readonly arrays. Read-only arrays come in action if we mark our array as read-only. We are not allowed to call the functions which can manipulate them after that point.

let arr :ReadonlyArray<string>= ['vue','angular','React'];
      let newarr =arr.slice().sort();
      console.log({...arr})
      console.log({...newarr})
      //result
      //['vue','angular','React']
      //['React','angular','vue']

Case sensitive sortings

When we call the sort function, we are sorting the array in alphabetical order. However, the default method of sorting is case sensitive. This means that It first sorts alphabetically all the capital letters [A-Z], and only after that has finished, it sorts the lower case letters [a-z]. We can see this in the above example. Even though ‘a’ comes before ‘R’, the ordering of the new array starts with ‘React’, since it is capitalized, and is followed by ‘angular’ and ‘vue’. This is something to keep in mind, if we want to sort the list alphabetically. It may be worthwhile to convert all the characters in a string to lowercase first.

Comparer function in sort function

Now the above code will work if the array element types are strings. But for complex objects, there is a different approach. Let’s say we have an array of objects and we want to sort on a specific property. Then in that case we will have to pass a parameter to the sort function which is a function which accepts two things. The first one is the first value of the array and the next is the next value in that array and then we can return a.[specificproperty] — b.[specificproperty]. Let’s an example of this:

let arr = [{
        name:'jhon' , year:1990
      },
      {
        name:'kasey' , year:1985
      },
      {
        name:'jhony' , year:1980
      },
      {
        name:'lily' , year:1975
      }]
      
      
      arr.sort((a,b)=>{
       return a.year - b.year
      })

Summary

Arrays sort function rearranges the array and returns the same array. It does not returns a new array. It is case sensitive so capital letters will be sorted before the lower case letters. For complex objects, we need to pass a comparer method in which we can sort the array by a specific property.