Sorting an array of objects is a common task in JavaScript while working with large datasets like user records, product listings, or employee details. JavaScript provides multiple ways to sort an array of objects based on different properties.
In this blog, you will explore different methods to sort an array of objects by property values, including sorting numbers, sorting strings, sorting in descending order, and using the lodash library to sort the array of objects by any specific property value.
Table of Contents:
Understanding the sort() Method
JavaScript provides you with the built-in sort() method for sorting arrays in ascending order. It sorts an element without creating a new array, only modifying the original array. The sort() method converts elements to strings and then sorts them alphabetically, which means it may sometimes produce incorrect results when sorting numbers.
Example: Sorting numbers using the sort() method
Output:
Explanation: In this example, you’re using the sort() method for sorting the simple array of numbers. The compare function (a, b) => a – b ensures that the numbers are sorted in ascending order.
Beginner-Friendly Courses That Guide You Step-By-Step Through Real Projects
Become a Web Developer – Enroll Now!
Sorting an Array in JavaScript
Sorting an array is important to get a structured object based on some properties. Here are the different cases that arise when you’re sorting an array in JavaScript. Let’s discuss them one by one:
Sorting by Numeric Property
To sort an array of objects by a numeric property, such as age, we use the sort() method with the comparison function.
Example:
Output:
Explanation: In this example, you are using the sort() method and a comparison function ((a, b) => a.age – b.age) for sorting the array of objects based on the age property.
Sorting by String Property
The localeCompare() method is used for sorting the objects by a string property, like name. The localeCompare() method is helpful as it sorts strings alphabetically, including case-insensitive comparison (A and a are treated the same).
Example:
Output:
Explanation: In this example, you are using the localeCompare() method for sorting an array of objects on the basis of a string property (here, it is name).
Sorting in Descending Order
Sorting an array of objects is very simple. To sort them in descending order, you simply swap the order of a and b in your compare function.
Example:
Output:
Explanation: In this example, as you see, the value of the age property prints in descending order.
Sorting by Multiple Properties
Sometimes, we need to sort the array of objects by multiple properties, like sorting by name first and then by age. When names are the same, we can use the logical OR to handle them.
Example:
Output:
Explanation: In this example, you’re comparing multiple values one by one, first the array of objects, arranged according to the name property, then it is arranged according to the age.
Using Lodash for Sorting
The Lodash library is a popular JavaScript library that is used to perform sorting on arrays of objects. The .sortBy() method allows sorting by one or more properties.
Example:
Output:
Explanation: In this example, we are using the Lodash library for sorting an array of objects based on specific properties like age (in this case).
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
Sorting an array of objects in JavaScript is important when you are working with structured data. Whether you are sorting by numbers, strings, or multiple properties. JavaScript provides you with methods like .sort() and .localeCompare(). The Lodash library, which is an external library, further makes the process simple and is a great alternative for the sort() and localeCompare() methods. By learning these methods, you can sort the arrays of objects based on a specific property.
How to Sort an Array of Objects in JavaScript – FAQs
Q1. How do you compare two equal dates in JavaScript?
You can compare two equal dates in JavaScript using the .getTime() method or by using relational operators.
Q2. How do you compare two dates in JavaScript Moment?
In JavaScript, the moment.js library provides you the methods like isSame(), isAfter(), and isBefore() to compare the dates.
Q3. How do I get the current date in JavaScript?
To get the current date in JavaScript, you can use the Date object. Example: const date = new Date(); console.log(date.toLocaleString());
Q4. Can we compare the two date strings?
Yes, it is possible to compare two date strings in JavaScript. You can do that by using the Date object, relational operators, or external libraries like moment.js and date-fns.
Q5. How do you check if two things are equal in JavaScript?
You can use the (===) operator to check whether two things are equal or not in JavaScript. It will return either true or false.