JavaScript || Sort.by.js – Simple Array Sorting With Multiple Sorting Conditions Using Vanilla JavaScript


The following is a module that handles complex array sorting. Much like the SQL/LINQ ‘Order By’ operation, this module allows sorting capabilities with multiple sorting conditions for arrays of any type.

Sort.by.js Source

Contents

1. Usage
2. Sorting Condition
3. Comparison
4. Null Values
5. Filtering & Selecting Items
6. Sort.by.js Namespace
7. Notes
8. More Examples


1. Usage

Syntax is very straightforward. The following demonstrates sorting a simple array:

To sort a simple array in descending order, it can be done like so:

In the example above, the second parameter of the ‘Sort.by‘ function defines the sorting condition by which the array should be sorted.



2. Sorting Condition

A sorting condition defines how the array should be sorted. It is made up of 3 properties.

The ‘value‘ property is a function which defines how the value for the sorting condition should be determined. The ‘desc‘ property is a boolean, which defines the sorting direction of the sorting condition. The ‘compare‘ property is a function, which overrides the default compare function for the sorting condition.

More than one sorting condition can be used. The array is sorted in the order in which the conditions were specified (FIFO).

The following example sorts an object array with multiple sorting conditions. In this example, the array is first sorted by the full name length in descending order, followed by the id field sorted in ascending order.



3. Comparison

Overriding the default comparison function is optional. But, when it is used, it takes precedence over the ‘desc’ property. That is because when supplying the custom comparison function, that ultimately defines the sorting direction and behavior.

The following example demonstrates the use of the comparison function to sort a mixed array.



4. Null Array Values

The default comparison function automatically handles null values by placing them at the end of the array, regardless of the sorting direction. This behavior can be overridden by supplying your own user defined comparison function.

The following example demonstrates sorting an array with null values.

In the example below, the default comparison function is overridden, but null values are un-handled. This leaves it up to the user to define it’s behavior.



5. Filtering & Selecting Items

Filtering and selecting result items can be achieved by using either the Array.filter() and Array.map() technique, or by using Array.reduce().

The example below demonstrates this. It first sorts an object array with multiple conditions. The array is sorted by score DESC, time ASC, and age ASC. It then filters the result array by a certain score, and returns a new list which contains only the score, time, and age properties.

It should be noted that using the Array.filter() and Array.map() technique iterates the array twice. This same effect can be achieved by using Array.reduce(), which only iterates the array once, thus being more efficient.



6. Sort.by.js Namespace

The following is the Sort.by.js Namespace. Include this in your project to start using!



7. Notes

This module uses the Array.sort() function to handle array sorting. But instead of altering the original array, it returns a newly sorted array. Internally, a separate ‘sortable’ array is created, which contains only the values to be sorted. This is done to reduce overhead in the .sort().compare() function, so item values are only computed once, as opposed to possibly multiple times for each comparison. So instead of sorting the original array, the lightweight ‘sortable’ array is sorted instead. Once array sorting is complete, the newly sorted ‘sortable’ array is used to reorder the original array, and that result is returned.



8. More Examples

Below are more examples demonstrating the Sort.by use for sorting arrays. Don’t forget to include the module when running the examples!


QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Was this article helpful?
👍 YesNo

Leave a Reply