Array Sort in JavaScript

Introduction

The sort() method is used to sort arrays in javascript. The array sort in javascript uses in-place algorithm to sort array in javascript, i.e. the input array is transformed into a sorted array without using any auxiliary data structure. The input is usually overwritten by the output as the algorithm executes.

Syntax of Array Sort in JavaScript

The arr is the array that need to be sorted.

The array sort method in javascript can be called with or without any parameter.

When the array sort is called without any parameter, by default, it sort array javascript in increasing order.

Parameters of Array Sort in JavaScript

• compFunc

This is a function. This is passed as parameter in Array sort function to define the sorting behavior of the array sort. For e.g. we can pass the function such that the array sort happens in decreasing order.

Return value of Array Sort in JavaScript

The array sort method sorts the input array. The sorting operation happens on the same array and no new array is created.

Time complexity of Array Sort in JavaScript

The time complexity of the sort cannot be guaranteed as it depends on the implementation.

The firefox web browser uses the merge sort implementation and its time complexity is O(nlog n).

The chrome web browser uses the Timsort implementation, which is a hybrid of merge sort and insertion sort, and its time complexity is O(nlogn) (while in the case of a small array, its time complexity is `O(n)``).

Sorting an Array in Javascript

Before we sort an array, let's create an array and display its elements.

Creating an array

Let's create an array of the first five multiples of 5. We'll create this array by the array literal method.

Now, we have an array arr that contains the first five multiples of 5.

We can see that the multiples of 5 aren't stored in a sorted sequence in the array arr. To confirm this we'll display the elements of the array.

Displaying an array

The elements of an array can be simply displayed by doing console.log() of the array.

Now that we've created the array and displayed its elements let's sort the array such that the multiples of 5 are placed in increasing order.

Sorting an array

The arr array can be sorted using array sort. We need to call the sort() method with arr using dot (.) operator.

The sort array javascript method by default sorts the array in increasing order, thus there won't be any parameter passed.

The above line of code will perform the array sort and the array will be sorted in increasing order. We can check the new array by simply displaying its elements.

compareFunction

The compareFunction is an optional parameter in array sort method. If the compare function is not passed as the parameter of the sort() method, then it, by default sorts the elements by converting them into strings and comparing strings in UTF-16 code units order.

But, when the compareFunction is passed to the sort() method, the array elements are sorted according to the return value of the compareFunction in the sort array javascript method.

Syntax: The compareFunction takes two parameters a and b and returns three possible values: 0, negative or positive.

Following is the general form of the compareFunction:

Sorting an Array of Strings

As discussed earlier, the array of strings is sorted according to their sequences of UTF-16 code units values. By default the javascript array sort arranges the string elements in dictionary order, i.e. the elements that will appear first in the dictionary are placed first.

Sorting Non-ASCII Characters

The array sort method works fine for ASCII characters but for non-ASCII characters, it may produce unexpected results. Thus in order to sort the array elements that may have non-ASCII characters, we use the localeCompare() method.

The localeCompare() is a javascript method that returns a number indicating whether a reference string comes before, or after, or is the same as the given string in sort order.

ASCII is based on the English alphabet and consists of 128 characters, including A-Z, 0-9, punctuation, spaces, and other control codes that can be found on a standard English keyboard.

Example:

Let's sort an array of non-ASCII elements in increasing order.

In the above example, the array sort method is passed a compareFunction as a parameter. The function compares a and b using the localeCompare() method returns a number indicating whether a reference string comes before, or after, or is the same as the given string in sort order.

Sorting an array of numbers

Why the sort( ) method isn't working for numbers?

The sort() method sometimes behaves unexpectedly when applied to an array of numbers. For e.g. let us sort an array of numbers in increasing order:

In the above example, we can see that the output is [ 10, 1000, 20, 35, 51 ] but the correct sequence should have been [ 10, 20, 35, 51, 1000 ].

This happens because the array sort methods convert the array elements into string before comparing them. Thus all the elements of the array arr are compared as strings (i.e 10 has become "10", 35 has become "35" and so on). Now when compared, the string "100" comes before the strings "20", "35" and "51" (as it has 1 as its first character which gives it precedence over mentioned string elements). This the sort() method places 1000 before 20, 35 and 51 in the resultant array.

How to Sort Array of Numbers?

To fix the above problem, a compareFunction is defined and passed to the array sort method as a parameter. The compareFunction definition should be defined such that it returns our desired result.

Sorting an Array of Objects by a Specified Property

In javascript, we can create an array of objects. Object in javascript is an entity that has a state and behavior. Objects in javascript may contain multiple key-value pairs.

Let us make an array of objects that store data about different cars:

Now, how do we sort this array?

From the above array, we can observe that the elements of the array have multiple keys (or properties) that may have the same or different data types.

Thus, compareFunction can be used to sort an array of objects. We should specify the property of the object which is used to compare the elements across the array.

Sorting objects by a numeric property

Let us sort the car array on the basis of increasing order of their price.

In the above example, the objects are passed as a parameter to the compare function.

In the compare function we are using the . operator to access the property which is used to compare the elements in array sort. The compareFunction is an anonymous function type.

Since the array is sorted on the basis of price, thus we are accessing the price of elements using a.price and b.price and returning the difference.

Sorting objects by the date property

Now suppose we want to array the elements in a way that the newest cars appear first and the oldest car appears last. In this case, we will have to sort the array by date property in decreasing order

Sorting with Map

So far we have seen how the compareFunction is used to sort the array. As already discussed, the compareFunction is called using two parameters to return a result.

This may work smoothly for small arrays or simple functions, but when the array to be sorted is very large, or the function definition is complex, then it may result in a high overhead.

To avoid this situation, map is used. It is considered a more efficient method to perform the array sort.

In javascript, Map is a collection of elements where each element is stored as a Key, value pair.

In map sort, we basically traverse the array once to extract the actual values used for sorting and they are stored in a temporary array. Then we sort the temporary array and then traverse the temporary array to achieve the correct order.

Sort Stability

Sort stability means that the algorithm will maintain the relative order of records with equal keys.

Post EcmaScript 2019, the sort method in Javascript is stable.

Browser Compatibility

• Columns indicate the browser names and the compatibility of each tag with each browser.

• If the row contains a number (for example, 1 for Firefox), it indicates that the browser version specified is the bare minimum required to support the tag.

• n/a means that the browser doesn't support that functionality.