Sorting Arrays in JavaScript
In this post, we will talk about how to sort an array in JavaScript. We will also learn how to sort an array of objects.
Sorting a String array
The JavaScript Array object has a built-in method sort() for sorting array elements in alphabetical order.
const names = ["Zuck","Naveen","Anand","Subash"]; console.log(names.sort()); //["Anand", "Naveen", "Subash", "Zuck"]
Sorting a Numerical array
The sort() method considers the array elements as String and sorts them. Hence, it wouldn’t work with numbers as expected.
const marks = [10, 2, 90, 12, 45, 56, 78]; console.log(marks.sort()); //[10, 12, 2, 45, 56, 78, 90]
As you can see, the sorted array is umm, not sorted. To fix this, we need to pass a function as an argument that returns the difference between two elements, so that the sort method uses the return value to sort the array.
const marks = [10, 2, 90, 12, 45, 56, 78];
console.log(marks.sort(function(a, b) {
return a - b;
}));
//[2, 10, 12, 45, 56, 78, 90]To sort this array in descending order..
const marks = [10, 2, 90, 12, 45, 56, 78];
console.log(marks.sort(function(a, b) {
return b - a;
}));
//[90, 78, 56, 45, 12, 10, 2]Remember the sort method uses the return value of the function for sorting.
Sorting an array of Objects
var scores = [
{ name: "Zuck", score: 14 },
{ name: "Naveen", score: 30 },
{ name: "Subash", score: 21 },
{ name: "Anand", score: 42 },
{ name: "Kopi", score: 16 }
];
console.log(scores.sort());
//(5) [{…}, {…}, {…}, {…}, {…}]
//0: {name: "Zuck", score: 14}
//1: {name: "Naveen", score: 30}
//2: {name: "Subash", score: 21}
//3: {name: "Anand", score: 42}
//4: {name: "Kopi", score: 16}If you try to sort an array of Objects, it remains unsorted.
We can pass the compare function as an argument to the sort method and sort the array of Objects in the order we want. If you know Java, you might relate this with Comparator.
var scores = [
{ name: "Zuck", score: 14 },
{ name: "Naveen", score: 30 },
{ name: "Subash", score: 21 },
{ name: "Anand", score: 42 },
{ name: "Kopi", score: 16 }
];
console.log(scores.sort(function (a, b) {
return a.score - b.score;
}));
//(5) [{…}, {…}, {…}, {…}, {…}]
//0: {name: "Zuck", score: 14}
//1: {name: "Kopi", score: 16}
//2: {name: "Subash", score: 21}
//3: {name: "Naveen", score: 30}
//4: {name: "Anand", score: 42}To sort this array by names..
scores.sort(function(a, b) {
var x = a.name.toLowerCase(); // To ignore case
var y = b.name.toLowerCase();
if(x < y) {
return -1;
}
if(x > y) {
return 1;
}
// dont sort when names are the same
return 0;
});
console.log(scores);
//(5) [{…}, {…}, {…}, {…}, {…}]
//0: {name: "Anand", score: 42}
//1: {name: "Kopi", score: 16}
//2: {name: "Naveen", score: 30}
//3: {name: "Subash", score: 21}
//4: {name: "Zuck", score: 14}
