JavaScript How to Sort an Array of Arrays

JavaScript How to Sort an Array of Arrays

To sort an array of arrays in JavaScript, pass a custom comparison function into the sort() function call.

For example, let’s sort an array of arrays based on the second element in ascending order:

const data = [["This", 3], ["just", 6], ["there", 12], ["is", 2]]

const sortedData = data.sort((a, b) => b[1] - a[1])

console.log(sortedData)

Result:

[['there', 12], ['just', 6], ['This', 3], ['is', 2]]

How Does It Work

To learn how this works, you need to understand how basic sorting works in JavaScript.

JavaScript Sorts Alphabetically by Default

By default, sorting in JavaScript happens alphabetically. This is not what we want.

To sort numerically, you need to specify a sorting function that is applied for consecutive elements until the array is fully sorted.

Example 1. Sort an Array of Numbers in Descending Order

For example, let’s sort a list of numbers in increasing order.

var numArray = [3, 1, 2];

numArray.sort(function(a, b) {
  return a - b;
});

console.log(numArray);

Output:

[1, 2, 3]

Under the hood:

  • The array sort() function goes through the array and takes two consecutive elements under inspection.
  • It then subtracts the second element from the first element.
  • Then it places the first element before the second element if the result is positive.
  • It does this until the array is fully sorted.

Arrow Function Syntax

An arrow function is a shorthand alternative for creating a function in JavaScript.

It is limited and does not work in all situations. But a single expression function like the one in the sort() function is a good example of when you may use one.

If the function contains a single expression, you can omit using curly braces as well.

Let’s simplify the code of the previous example a bit by utilizing the arrow function:

var nums = [3, 1, 2];
nums.sort((a, b) => a - b);

console.log(numArray);

Output:

[1, 2, 3]

Example 2. Sort in Ascending Order

Before jumping back to the original problem, let’s see another example where we sort a list of numbers in ascending order.

If you want to sort the list in ascending order instead, swap a and b in the comparison function:

var nums = [3, 1, 2];
nums.sort((a, b) => b - a);

console.log(numArray);

Output:

[3, 2, 1]

The Original Problem—How to Sort Array of Arrays in JavaScript

Now, let’s go back to the original problem—how to sort an array of arrays.

Here is an example you already saw.

const data = [["This", 3], ["just", 6], ["there", 12], ["is", 2]]

const sortedData = data.sort((a, b) => b[1] - a[1])

console.log(sortedData)

Now that you understand how basic sorting works, it is also easy to see how this piece of code works:

  • The sort() function applies a comparison function to the array that takes two arguments a and b. (The arrow syntax lets you omit the function and return keywords and the curly braces.)
  • This time a and b are not numbers, but arrays.
  • To sort the array of arrays, you need to specify based on which element you want to sort them.
  • Here we compare the arrays by their second elements.
  • Then the sort() function loops through the array of arrays and sorts it based on the magnitude of the second elements.

Conclusion

Today you learned how to sort an array of arrays in Javascript by customizing the comparison function.

const data = [["This", 3], ["just", 6], ["there", 12], ["is", 2]]

const sortedData = data.sort((a, b) => b[1] - a[1])

console.log(sortedData)

Also, you learned how basic sorting works in JavaScript.

Thanks for reading. I hope you enjoy it.

Happy coding!

Further Reading

100 JavaScript Interview Questions

50 Buzzwords of Web Development

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest