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 code 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 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]
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 argumentsa
andb
. (The arrow syntax lets you omit thefunction
andreturn
keywords and the curly braces.) - This time
a
andb
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 element.
Thanks for reading. I hope you enjoy it.
About the Author
- I'm an entrepreneur and a blogger from Finland. My goal is to make coding and tech easier for you with comprehensive guides and reviews.
Recent Posts
Artificial Intelligence2023.03.14Best AI Tools of 2023 (Save Time & Boost Productivity)
Python2023.02.16How to Pass a Variable from HTML Page to Another (w/ JavaScript)
JavaScript2023.02.16JavaScript How to Get Selected Text from a Textbox
JavaScript2023.02.15JavaScript Select All Text in Div with a Mouse Click