Recently, I was working on a PowerApps Component Framework (PCF) project that required sorting an array of objects by date. The dates were in ISO 8601 format but without a time zone – for example, "2025-05-01T15:00:00.00".
Without much thought, I wrote something similar to:
<span class="hljs-keyword">const</span> sorted = data.sort(<span class="hljs-function">(<span class="hljs-params">a, b</span>) =></span> {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(a.date) - <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(b.date);
})
This worked fine on small datasets. But the array I was sorting had nearly 30,000 objects. On a fast development machine, the performance hit was around 100–150ms – already noticeable when combined with other UI work. When I tested with 4× CPU throttling in the browser, the delay increased to nearly 400ms, which more accurately simulates a lower-end device. That’s a reasonable approach to ensure your app still performs well for users on slower machines.
Results in browser:
sort_with_date_conversion: 397.955078125 ms
Output with performance throttled by 4x slowdown
In this article, you will learn how to sort dates efficiently in JavaScript. We’ll walk through what makes the method above inefficient, as well as a better pattern–especially when dealing with large amounts of data.
Table of Contents
Why 400ms Feels Slow
According to Jakob Nielsen’s classic “Usability Engineering” (1993), delays under 100 milliseconds are perceived as instantaneous. Between 100ms and 1,000ms, users start to notice lag – even if it doesn’t require UI feedback. In my case, 400ms felt choppy, especially since the PCF component was already handling other tasks. It wasn’t going to cut it.
Setting Up Our Experiment
Let’s simulate this with a simple experiment that stress tests our sorting. We’ll create an array of 100,000 ISO-formatted dates, and we will simulate a 4x performance slowdown in the browser for all scenarios:
<span class="hljs-comment">// Create an array of 100,000 ISO-format dates</span>
<span class="hljs-keyword">const</span> isoArray = [];
<span class="hljs-keyword">let</span> currentDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">2023</span>, <span class="hljs-number">9</span>, <span class="hljs-number">1</span>); <span class="hljs-comment">// October 1, 2023</span>
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-number">100000</span>; i++) {
<span class="hljs-keyword">const</span> year = currentDate.getFullYear();
<span class="hljs-keyword">const</span> month = <span class="hljs-built_in">String</span>(currentDate.getMonth() + <span class="hljs-number">1</span>).padStart(<span class="hljs-number">2</span>, <span class="hljs-string">'0'</span>);
<span class="hljs-keyword">const</span> day = <span class="hljs-built_in">String</span>(currentDate.getDate()).padStart(<span class="hljs-number">2</span>, <span class="hljs-string">'0'</span>);
isoArray.push({ <span class="hljs-attr">date</span>: <span class="hljs-string">`<span class="hljs-subst">${year}</span>-<span class="hljs-subst">${month}</span>-<span class="hljs-subst">${day}</span>`</span>, <span class="hljs-attr">value</span>: i });
currentDate.setDate(currentDate.getDate() + <span class="hljs-number">1</span>); <span class="hljs-comment">// advance by one day</span>
}
<span class="hljs-comment">// Shuffle the array to simulate unsorted input</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">shuffle</span>(<span class="hljs-params">array</span>) </span>{
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = array.length - <span class="hljs-number">1</span>; i > <span class="hljs-number">0</span>; i--) {
<span class="hljs-keyword">const</span> j = <span class="hljs-built_in">Math</span>.floor(<span class="hljs-built_in">Math</span>.random() * (i + <span class="hljs-number">1</span>));
[array[i], array[j]] = [array[j], array[i]];
}
}
shuffle(isoArray);
The Cost of Date Conversion
Now, let’s sort using the new Date() method, where each new date is instantiated directly inside the sort method.
<span class="hljs-built_in">console</span>.time(<span class="hljs-string">'sort_with_date_conversion'</span>);
<span class="hljs-comment">// Sorting by converting each string to a Date object on every comparison</span>
<span class="hljs-keyword">const</span> sortedByDate = isoArray.sort(<span class="hljs-function">(<span class="hljs-params">a, b</span>) =></span> {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(a.date) - <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(b.date);
});
<span class="hljs-built_in">console</span>.timeEnd(<span class="hljs-string">'sort_with_date_conversion'</span>);
Result in browser:
sort_with_date_conversion: 1629.466796875 ms
Sorting 100,000 dates took almost 2 seconds.
Almost 2 seconds. Ouch.
The Lexicographical Superpower of ISO 8601
Here’s the critical realization: ISO 8601 date strings are already lexicographically sortable. That means we can skip the Date object entirely:
<span class="hljs-built_in">console</span>.time(<span class="hljs-string">'sort_by_iso_string'</span>);
<span class="hljs-comment">// Compare strings directly — thanks to ISO 8601 format</span>
<span class="hljs-keyword">const</span> sorted = isoArray.sort(<span class="hljs-function">(<span class="hljs-params">a, b</span>) =></span>
a.date > b.date ? <span class="hljs-number">1</span> : <span class="hljs-number">-1</span>
);
<span class="hljs-built_in">console</span>.timeEnd(<span class="hljs-string">'sort_by_iso_string'</span>);
<span class="hljs-built_in">console</span>.log(sorted.slice(<span class="hljs-number">0</span>, <span class="hljs-number">10</span>));
Output in the console:
sort_by_iso_string: 10.549072265625 ms
[
{ date: <span class="hljs-string">'2023-10-01'</span>, value: 0 },
{ date: <span class="hljs-string">'2023-10-02'</span>, value: 1 },
{ date: <span class="hljs-string">'2023-10-03'</span>, value: 2 },
{ date: <span class="hljs-string">'2023-10-04'</span>, value: 3 },
{ date: <span class="hljs-string">'2023-10-05'</span>, value: 4 },
{ date: <span class="hljs-string">'2023-10-06'</span>, value: 5 },
{ date: <span class="hljs-string">'2023-10-07'</span>, value: 6 },
{ date: <span class="hljs-string">'2023-10-08'</span>, value: 7 },
{ date: <span class="hljs-string">'2023-10-09'</span>, value: 8 },
{ date: <span class="hljs-string">'2023-10-10'</span>, value: 9 }
]
From 1600ms down to ~10ms. That’s a 160x speedup.
Why is this faster? Because using new Date() inside .sort() results in creating two new Date objects per comparison. With 100,000 items and how sort works internally, that’s millions of object instantiations. On the other hand, when we sort lexicographically, we are simply sorting strings, which is far less expensive.
What If Your Dates Aren’t ISO Format?
Let’s say your dates are in MM/DD/YYYY format. Those strings aren’t lexicographically sortable, so you’ll need to transform them first.
Transform then Sort
<span class="hljs-built_in">console</span>.time(<span class="hljs-string">'sort_with_iso_conversion_first'</span>);
<span class="hljs-keyword">const</span> sortedByISO = mdyArray
.map(<span class="hljs-function">(<span class="hljs-params">item</span>) =></span> { <span class="hljs-comment">// First convert to ISO format</span>
<span class="hljs-keyword">const</span> [month, day, year] = item.date.split(<span class="hljs-string">'/'</span>);
<span class="hljs-keyword">return</span> { <span class="hljs-attr">date</span>: <span class="hljs-string">`<span class="hljs-subst">${year}</span>-<span class="hljs-subst">${month}</span>-<span class="hljs-subst">${day}</span>`</span>, <span class="hljs-attr">value</span>: item.value };
})
.sort(<span class="hljs-function">(<span class="hljs-params">a, b</span>) =></span> (a.date > b.date ? <span class="hljs-number">1</span> : <span class="hljs-number">-1</span>)); <span class="hljs-comment">// then sort</span>
<span class="hljs-built_in">console</span>.timeEnd(<span class="hljs-string">'sort_with_iso_conversion_first'</span>);
Output:
sort_with_iso_conversion_first: 58.8779296875 ms
Still perceived as instantaneous.
Retaining Original Objects
If you want to keep your original objects (with non-ISO dates), you can use tuples:
<span class="hljs-built_in">console</span>.time(<span class="hljs-string">'sort_and_preserve_original'</span>);
<span class="hljs-comment">// Create tuples: [sortableDate, originalObject]</span>
<span class="hljs-keyword">const</span> sortedWithOriginal = mdyArray
.map(<span class="hljs-function">(<span class="hljs-params">item</span>) =></span> {
<span class="hljs-keyword">const</span> [month, day, year] = item.date.split(<span class="hljs-string">'/'</span>);
<span class="hljs-keyword">return</span> [<span class="hljs-string">`<span class="hljs-subst">${year}</span>-<span class="hljs-subst">${month}</span>-<span class="hljs-subst">${day}</span>`</span>, item]; <span class="hljs-comment">// return the tuple items</span>
})
.sort(<span class="hljs-function">(<span class="hljs-params">a, b</span>) =></span> a[<span class="hljs-number">0</span>] > b[<span class="hljs-number">0</span>] ? <span class="hljs-number">1</span> : <span class="hljs-number">-1</span>) <span class="hljs-comment">// sort based on the first item</span>
.map(<span class="hljs-function">(<span class="hljs-params">[, item]</span>) =></span> item); <span class="hljs-comment">// Return the original object</span>
<span class="hljs-built_in">console</span>.timeEnd(<span class="hljs-string">'sort_and_preserve_original'</span>);
Output:
sort_and_preserve_original: 73.733154296875 ms
Still within the boundaries of being perceived as instantaneous.
The original data is preserved and the performance falls well within what is perceived as instantaneous.
Key Takeaways
Avoid object creation inside .sort(), especially for large arrays.
ISO 8601 strings are lexicographically sortable. Use string comparison when you can.
If your date strings aren’t sortable, map them to a sortable form first, sort, and optionally map them back.
Minor tweaks in sorting can yield massive performance gains – especially in UI components or real-time visualizations.
Found this helpful? I work at the intersection of low-code and pro-code development, focusing on building performant apps and helping you reclaim your time through thoughtful automation. Explore more at scriptedbytes.com.
Source: freeCodeCamp Programming Tutorials: Python, JavaScript, Git & MoreÂ
