Sorting means putting things in order and making them more organized. We use dates in a lot of scenarios like building a task scheduler, managing events, or displaying a timeline. Therefore, often, we may be required to sort dates in JavaScript. In this article, we will explore how to sort an array of objects by date, allowing us to manage our data more accurately.\u00a0<\/p>\n\n\n\n
JavaScript has a built-in Sort() method to sort data objects. A date in an object can be in the form of a string or as a Date object. <\/strong><\/p>\n\n\n\n Here\u2019s the demonstration:<\/p>\n\n\n\n Whether the date is initially stored as a string or as a Date object, We may often need to convert it into a Date object to perform various operations on it.<\/p>\n\n\n\n Next, we will use a compareFunction inside the sort() method.\u00a0<\/p>\n\n\n\n CompareFunction is written as : <\/p>\n\n\n\n This compareFunction takes two parameters in it. Let it be a and b. These are the two values we are comparing. It returns a negative, zero, or positive value based on arguments passed.<\/p>\n\n\n\n If \u2018a\u2019 should be placed before \u2018b\u2019 it returns a negative value, in the case of a positive value \u2018a\u2019 is placed after \u2018b\u2019, and zero is returned if \u2018a\u2019 and \u2018b\u2019 are of the same order.<\/p>\n\n\n\n Let’s explore various methods for sorting dates in JavaScript.<\/p>\n\n\n\n This is a simple approach by using a built-in sort() method with Date objects. The sort() method compares Date objects directly and sorts the array in ascending order. Let\u2019s understand through an example to sort by date:\u00a0<\/p>\n\n\n\n Here as we can see initially our dates are in string form, so we have to convert these to Date objects because the sort() Method works on Date objects.<\/p>\n\n\n\n The syntax for creating a Date object is:<\/p>\n\n\n\n Output:<\/strong><\/p>\n\n\n\n Hence our dates are successfully sorted using the sort() method.<\/p>\n\n\n\n we returned -1,1 or 0 based on comparisons. More appropriately we returned -1 if \u2018a\u2019 should be placed before \u2018b\u2019,1 if \u2018a\u2019 should be placed after \u2018b\u2019, and 0 if no change.<\/p>\n\n\n\n In this method, sorting is done by numeric representations of dates. The numeric representations are obtained by the getTime() method. We will use the sort() method along with getTime() to sort dates. Let’s consider an example:<\/p>\n\n\n\n Here already our dates are as date objects. We got numeric representations by getTime() and then used a compareFunction inside sort() method.<\/p>\n\n\n\n Output:<\/strong><\/p>\n\n\n\n In this approach, we will define a custom sorting function. We can design the function as we want, and then we will pass it as an argument for the sort() method.\u00a0<\/p>\n\n\n\n Let’s take an example where we want to sort decreasingly by date:<\/p>\n\n\n\n Output:<\/strong><\/p>\n\n\n\n Here we can see that we created our custom function sortByJoinDateDescending to sort in descending order. We returned b.joinDate – a.joinDate in the function, it simply reversed the logic that we used in the previous example.<\/p>\n\n\n\n More appropriately we returned -1 if \u2018b\u2019 should be placed before \u2018a\u2019,1 if \u2018b\u2019 should be placed after \u2018a\u2019, and 0 if no change. Therefore by this method, we can create a separate function and then use it in the sort() method.<\/p>\n\n\n\nconst myObject = {\n eventName: \"Sample Event\",\n eventDate: \"2022-03-20\" \/\/ Date represented as a string\n};\n\nconst myObject = {\n eventName: \"Sample Event\",\n eventDate: new Date(\"2022-03-20\") \/\/ Date represented as a Date object\n};\n<\/code><\/pre>\n\n\n\narray.sort(compareFunction);<\/code><\/pre>\n\n\n\n1) Sort() Method with Date Objects<\/strong><\/h3>\n\n\n\n
\/\/ Sample data representing employees with names and dates of joining\nconst employeesData = [\n { name: 'John Doe', joinDate: '2022-03-15' },\n { name: 'Alice Smith', joinDate: '2023-01-10' },\n { name: 'Bob Johnson', joinDate: '2022-06-22' }\n];\n<\/code><\/pre>\n\n\n\nlet dateX = new Date(x.joinDate);\n\nHere a new Date() constructor is used. Let's apply this in our example:\n\n\/\/ Convert date strings to Date objects and then sort the array\nemployeesData.sort((a, b) => new Date(a.joinDate) - new Date(b.joinDate));\n\n\/\/ Display the sorted array based on the 'joinDate' property\nconsole.log(employeesData);<\/pre><\/div>\n\n\n\n
[\n { name: 'John Doe', joinDate: '2022-03-15' },\n { name: 'Bob Johnson', joinDate: '2022-06-22' },\n { name: 'Alice Smith', joinDate: '2023-01-10' }\n]\n<\/code><\/pre>\n\n\n\n2) Using getTime() Method<\/strong><\/h3>\n\n\n\n
\/\/ Sample data representing employees with names and dates of joining\nconst employeesData = [\n { name: 'John Doe', joinDate: new Date('2022-03-15') },\n { name: 'Alice Smith', joinDate: new Date('2023-01-10') },\n { name: 'Bob Johnson', joinDate: new Date('2022-06-22') }\n];\n\n\/\/ Sorting the array based on the 'joinDate' property\nemployeesData.sort((a, b) => a.joinDate.getTime() - b.joinDate.getTime());\n\n\/\/ Display the sorted array based on the 'joinDate' property\nconsole.log(employeesData);<\/pre><\/div>\n\n\n\n[\n { name: 'John Doe', joinDate: 2022-03-15T00:00:00.000Z },\n { name: 'Bob Johnson', joinDate: 2022-06-22T00:00:00.000Z },\n { name: 'Alice Smith', joinDate: 2023-01-10T00:00:00.000Z }\n]\n<\/code><\/pre>\n\n\n\n3) Using a Custom Sorting Function<\/strong><\/h3>\n\n\n\n
\/\/ Sample data representing employees with names and dates of joining\nconst employeesData = [\n { name: 'John Doe', joinDate: new Date('2022-03-15') },\n { name: 'Alice Smith', joinDate: new Date('2023-01-10') },\n { name: 'Bob Johnson', joinDate: new Date('2022-06-22') }\n];\n\n\/\/ Custom sorting function for descending order\nconst sortByJoinDateDescending = (a, b) => {\n return b.joinDate - a.joinDate;\n};\n\n\/\/ Sorting the array based on the 'joinDate' property in descending order\nemployeesData.sort(sortByJoinDateDescending);\n\n\/\/Display the output\nconsole.log(employeesData);<\/pre><\/div>\n\n\n\n[\n { name: 'Alice Smith', joinDate: 2023-01-10T00:00:00.000Z },\n { name: 'Bob Johnson', joinDate: 2022-06-22T00:00:00.000Z },\n { name: 'John Doe', joinDate: 2022-03-15T00:00:00.000Z }\n]\n<\/code><\/pre>\n\n\n\nConclusion<\/strong><\/h2>\n\n\n\n