Close Menu

    How to Sort Dates Efficiently in JavaScript

    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

    1. Why 400ms Feels Slow

    2. Setting Up Our Experiment

    3. The Cost of Date Conversion

    4. The Lexicographical Superpower of ISO 8601

    5. What If Your Dates Aren’t ISO Format?

    6. Key Takeaways

    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 

    Related Posts

    Leave A Reply

    For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.