JAVASCRIPT - SORTING ARRAY OBJECTS

To Sort the Arrays that contains object a function(You can call it a compare function) is used.

Say for example, you have 3 student objects(With name, roll and age) placed in an array.

var students = [ name : "Mohan", roll : 38, age : 12,
				name : "Kriti", roll : 56, age : 11,
				name : "Salim", roll : 42, age : 15 ]

And you want to sort the names based on age. Now, there is sort() function to sort the numbers.

But how would sort() function know, on which field it should sort. As there are three attributes name, roll and age.

And this is where, Compare Function comes to rescue.

Let us see in the below example.

Example :

<html>
<body>  
<script>

	var students = [ 
    				 {name:"Mohan", roll:38, age:12}, 
				 	 {name:"Kriti", roll:56, age:11},
				 	 {name:"Salim", roll:42, age:15} 
                   ];
                   
	students.sort(function(a, b){return a.age - b.age})
    
    for (student of students) {
		document.write("The Sorted Array based on age is : [ ",student.name,", ", student.roll, ", ",student.age," ]</br>")
    }
    
</script>      
</body>
</html>

Output :

The Sorted Array based on age is : [ Kriti, 56, 11 ]
The Sorted Array based on age is : [ Mohan, 38, 12 ]
The Sorted Array based on age is : [ Salim, 42, 15 ]

So, in the above code we have used the Compare Function to sort the students array based on age.

And as we have seen the students array has three student object in it.

var students = [
				{name:"Mohan", roll:38, age:12},
				{name:"Kriti", roll:56, age:11},
				{name:"Salim", roll:42, age:15}
			];

And as we have seen that sorting by age is a challenge, as there are 3 attributes name, roll and age.

And the sort() method won't know on which field the sorting should happen.

And this is where the Compare Function comes to rescue.

All we have done is, passed the Compare Function as an argument to the sort() method.

students.sort(function(a, b){return a.age - b.age})

Although, a lot happens internally. But for us, it is a simple task.

There are two things we need to remember:

In the return statement, we need to use the field to be sorted i.e. return a.age - b.age.And JavaScript is intelligent enough to guess that the objects needs to be sorted according to age.

Also, in the return statement, we have used return a.age - b.age. Which means sort the age in ascending order, as the statement is a.age - b.age. And the objects would be sorted in descending order, if the return statement would be b.age - a.age.

Sorting the objects based on name

Now, let us say, we want to sort the objects based on name.

var students = [ name : "Mohan", roll : 38, age : 12,
				name : "Kriti", roll : 56, age : 11,
				name : "Salim", roll : 42, age : 15 ]

Well! Sorting a String is a little different.

Let us define the function in the below example to compare the name and sort them accordingly.

Example :

<html>
<body>  
<script>

	function nameCompareFunction(a, b) {

    	var firstName = a.name.toLowerCase()
    	var secondName = b.name.toLowerCase()

    	if (firstName < secondName) {
        	return -1
    	} 
    	else if (firstName > secondName) {
        	return 1
    	}
    	else {
    		return 0
    	}	
	}


	var students = [ 
    				 {name:"Mohan", roll:38, age:12}, 
				 	 {name:"Kriti", roll:56, age:11},
				 	 {name:"Salim", roll:42, age:15} 
                   ];
                   
	students.sort(nameCompareFunction)
    
    for (student of students) {
		document.write("The Sorted Array based on name is : [ ",student.name,", ", student.roll, ", ",student.age," ]</br>")
    }
    
</script>      
</body>
</html>

Output :

The Sorted Array based on name is : [ Kriti, 56, 11 ]
The Sorted Array based on name is : [ Mohan, 38, 12 ]
The Sorted Array based on name is : [ Salim, 42, 15 ]

So, in the above code, we have declared a function called nameCompareFunction() to sort the student objects based on name.

So, we have called the nameCompareFunction() from the sort() function.

students.sort(nameCompareFunction)

And the sort() function does something internally. It passed two names at a time to the nameCompareFunction() function.

And the nameCompareFunction() function is called.

function nameCompareFunction(a, b) {

	var firstName = a.name.toLowerCase()
	var secondName = b.name.toLowerCase()

	if (firstName < secondName) {
		return -1
	}
	else if (firstName > secondName) {
		return 1
	}
	else {
		return 0
	}
}

In the nameCompareFunction() function, we have converted the both the names to lower case first.

var firstName = a.name.toLowerCase()
var secondName = b.name.toLowerCase()

Then we have checked if the firstName is less than the secondName.

if (firstName < secondName) {
	return -1
}

If so we return -1.

Else we check if firstName is greater than the secondName.

else if (firstName > secondName) {
	return 1
}

If so we return 1.

And if both the names are equal,

else {
	return 0
}

We return 0.

So, the moral of the story is, if you want to sort the strings in ascending order, write the below block,

if (firstName < secondName) {
	return -1
}
else if (firstName > secondName) {
	return 1
}
else {
	return 0
}

And if you want to sort the strings in descending order, write the below block,

if (firstName < secondName) {
	return 1
}
else if (firstName > secondName) {
	return -1
}
else {
	return 0
}

❮❮ PREV NEXT ❯❯