Home »
JavaScript
Sorting Methods in JavaScript
In this article, we will learn about some of the sorting methods in JavaScript.
Submitted by Mansha Lamba, on October 14, 2018
Sorting Methods in JavaScript
There are tons of sorting algorithms available like bubble sort, merge sort, insertion sort etc. You must have implemented some of these in other programming languages like C or C++. But in this article, I will be demonstrating the Sorting methods inbuilt in JavaScript.
Example of Sorting Methods in JavaScript
This is way different from usual sorting algorithms you must have seen.
JavaScript code:
<html>
<head>
<title>COLA PRODUCTS.!!!</title>
</head>
<body>
<script>
document.write("<br>");
var products = [
{ name: "Grapefruit", calories: 170, color: "red", sold: 8200 },
{ name: "Orange", calories: 160, color: "orange", sold: 12101 },
{ name: "Cola", calories: 210, color: "caramel", sold: 25412 },
{ name: "Diet Cola", calories: 0, color: "caramel", sold: 43922 },
{ name: "Lemon", calories: 200, color: "clear", sold: 14983 },
{ name: "Raspberry", calories: 180, color: "pink", sold: 9427 },
{ name: "Root Beer", calories: 200, color: "caramel", sold: 9909 },
{ name: "Water", calories: 0, color: "clear", sold: 62123 },
];
function compareSold(colaA, colaB) {
if (colaA.sold > colaB.sold) {
return 1;
} else if (colaA.sold === colaB.sold) {
return 0;
} else {
return -1;
}
}
function compareName(colaA, colaB) {
if (colaA.name > colaB.name) {
return 1;
} else if (colaA.name === colaB.name) {
return 0;
} else {
return -1;
}
}
function compareCalories(colaA, colaB) {
if (colaA.calories > colaB.calories) {
return 1;
} else if (colaA.calories === colaB.calories) {
return 0;
} else {
return -1;
}
}
function compareColor(colaA, colaB) {
if (colaA.color > colaB.color) {
return 1;
} else if (colaA.color === colaB.color) {
return 0;
} else {
return -1;
}
}
function printProducts(products) {
for (var i = 0; i < products.length; i++) {
document.write(
" Name: " +
products[i].name +
" " +
" Calories: " +
products[i].calories +
" " +
" Color: " +
products[i].color +
" " +
" Sold: " +
products[i].sold
);
document.write("<br>");
}
document.write("<br>");
}
products.sort(compareSold);
document.writeln("Products sorted by number of bottles sold:");
document.write("<br>");
printProducts(products);
products.sort(compareName);
document.write("Products sorted by name:");
document.write("<br>");
document.writeln();
printProducts(products);
products.sort(compareCalories);
document.write("Products sorted by calories:");
document.write("<br>");
printProducts(products);
products.sort(compareColor);
document.write("Products sorted by color:");
document.write("<br>");
printProducts(products);
</script>
</body>
</html>
Output
Products sorted by number of bottles sold:
Name: Grapefruit Calories: 170 Color: red Sold: 8200
Name: Raspberry Calories: 180 Color: pink Sold: 9427
Name: Root Beer Calories: 200 Color: caramel Sold: 9909
Name: Orange Calories: 160 Color: orange Sold: 12101
Name: Lemon Calories: 200 Color: clear Sold: 14983
Name: Cola Calories: 210 Color: caramel Sold: 25412
Name: Diet Cola Calories: 0 Color: caramel Sold: 43922
Name: Water Calories: 0 Color: clear Sold: 62123
Products sorted by name:
Name: Cola Calories: 210 Color: caramel Sold: 25412
Name: Diet Cola Calories: 0 Color: caramel Sold: 43922
Name: Grapefruit Calories: 170 Color: red Sold: 8200
Name: Lemon Calories: 200 Color: clear Sold: 14983
Name: Orange Calories: 160 Color: orange Sold: 12101
Name: Raspberry Calories: 180 Color: pink Sold: 9427
Name: Root Beer Calories: 200 Color: caramel Sold: 9909
Name: Water Calories: 0 Color: clear Sold: 62123
Products sorted by calories:
Name: Diet Cola Calories: 0 Color: caramel Sold: 43922
Name: Water Calories: 0 Color: clear Sold: 62123
Name: Orange Calories: 160 Color: orange Sold: 12101
Name: Grapefruit Calories: 170 Color: red Sold: 8200
Name: Raspberry Calories: 180 Color: pink Sold: 9427
Name: Lemon Calories: 200 Color: clear Sold: 14983
Name: Root Beer Calories: 200 Color: caramel Sold: 9909
Name: Cola Calories: 210 Color: caramel Sold: 25412
Products sorted by color:
Name: Diet Cola Calories: 0 Color: caramel Sold: 43922
Name: Root Beer Calories: 200 Color: caramel Sold: 9909
Name: Cola Calories: 210 Color: caramel Sold: 25412
Name: Water Calories: 0 Color: clear Sold: 62123
Name: Lemon Calories: 200 Color: clear Sold: 14983
Name: Orange Calories: 160 Color: orange Sold: 12101
Name: Raspberry Calories: 180 Color: pink Sold: 9427
Name: Grapefruit Calories: 170 Color: red Sold: 8200
Don't be scared...
The code is quite easy to understand.
First, an array of objects has been created. Each object having the same set of properties.
Arrays in JS have an inbuilt sort method. This sort method takes another comparing function defined by coders as an argument.
The major principle behind all this is that sort method needs a function to compare two elements of the array on which sort method is called. When that function is to be called and on which two elements of an array it is to be called that is decided by the sort method.
Here I have defined four functions that are used to compare two objects of an array at a time. Each function compares two objects on the different basis. Like function, compareName compares two objects on the basis of name property of objects.
If the name of the first object is lexicographically larger than the name of the second object then 1 is returned to sort method if they are equal 0 is returned and if the name of the first object is lexicographically smaller than the name of the second object then -1 is returned to sort method.
Other three functions compareSold, compareCaloriescompareColor work In exactly same manner.
Printproducts is a simple function used to print the input array.
Document.write is like console.log which is used to display text on corresponding HTML page.
I hope I have made everything very clear and precise.
Try to make your own compare functions and use the inbuilt sort method on different arrays.
JavaScript Tutorial »