Method of ordering the dates effectively in JavaScript

Recently, I was working on the Power App Component Framework (PCF) project, which needed to set a row of items according to history. Dates were in ISO 8601 format but without a time zone – for example, "2025-05-01T15:00:00.00".

Without much thinking, I wrote something similar to him:

const sorted = data.sort((a, b) => {
  return new Date(a.date) - new Date(b.date);
})

He worked well on small datases. But the array I was sorting was close to 30,000 items. On a faster growth machine, the performance target was about 100-150m – when already happens in combination with other UI work. When I tested 4 × CPUs in the browser with throthing, the delay reached about 400 mm, which better impede the bottom device. This is a reasonable way to ensure that your app still performs well for users on slow machines.

Results in the browser:

sort_with_date_conversion: 397.955078125 ms

In this article, you will learn how to effectively set the dates in the JavaScript. We will go through the above procedure that makes the above procedure ineffective, as well as a better sample – especially when dealing with large quantities of data.

The table of content

1. Why does 400 mm feel slow

2. To compile our experience

3. Date conversion costs

4. Super Power of the dictionary of ISO 8601

5. What if your dates are not ISO format?

6. Key path

Why 400ms Feels feel Lazy

According to Jacob Nelson’s classic Engineering of use (1993), less than 100 mm delays are considered immediately. Between 100 mm and 1000 mm, consumers begin to consider the break – even if it does not require UI’s opinion. In my case, felt 400 mm WetEspecially with the PCF component, they are already working. It was not going to cut it.

To compile our experience

Let’s imitate it with an easy experience that tests our sorting. We will produce a row of 100,000 ISO formated dates, and We will imitate the slow behavior of 4x performance in the browser for all scenario:

const isoArray = ();
let currentDate = new Date(2023, 9, 1); 

for (let i = 0; i < 100000; i++) {
  const year = currentDate.getFullYear();
  const month = String(currentDate.getMonth() + 1).padStart(2, '0');
  const day = String(currentDate.getDate()).padStart(2, '0');

  isoArray.push({ date: `${year}-${month}-${day}`, value: i });
  currentDate.setDate(currentDate.getDate() + 1); 
}


function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    (array(i), array(j)) = (array(j), array(i));
  }
}

shuffle(isoArray);

Date conversion costs

Now we set up using new Date() The method, where each new date is made directly within the direct layout procedure.

console.time('sort_with_date_conversion');


const sortedByDate = isoArray.sort((a, b) => {
  return new Date(a.date) - new Date(b.date);
});

console.timeEnd('sort_with_date_conversion');

Browser results:

sort_with_date_conversion: 1629.466796875 ms

Approximately 2 seconds

Super Power of the dictionary of ISO 8601

Here is a critical feeling: ISO 8601 History strings are already able to configure in terms of dictionary. This means that we can leave it Date Fully object:

console.time('sort_by_iso_string');


const sorted = isoArray.sort((a, b) => 
  a.date > b.date ? 1 : -1
);

console.timeEnd('sort_by_iso_string');
console.log(sorted.slice(0, 10));

Output in console:

sort_by_iso_string: 10.549072265625 ms
(
  { date: '2023-10-01', value: 0 },
  { date: '2023-10-02', value: 1 },
  { date: '2023-10-03', value: 2 },
  { date: '2023-10-04', value: 3 },
  { date: '2023-10-05', value: 4 },
  { date: '2023-10-06', value: 5 },
  { date: '2023-10-07', value: 6 },
  { date: '2023-10-08', value: 7 },
  { date: '2023-10-09', value: 8 },
  { date: '2023-10-10', value: 9 }
)

Why is it fast? Because to use new Date() In .sort() The results of making two new Date Object Per comparison. With 100,000 items, and how sort Works internally, these are probably millions of objects. On the other hand, when we set up a dictionary, we are easily sorting wires, which is less expensive.

What will happen if your dates Are not ISO format?

We say that your dates are inside MM/DD/YYYY The shape they are not setting in terms of indoor dictionary, so you will need to change them first.

Shift Again Sort

console.time('sort_with_iso_conversion_first');

const sortedByISO = mdyArray
  .map((item) => { 
    const (month, day, year) = item.date.split('/');
    return { date: `${year}-${month}-${day}`, value: item.value };
  })
  .sort((a, b) => (a.date > b.date ? 1 : -1)); 

console.timeEnd('sort_with_iso_conversion_first');

Output:

sort_with_iso_conversion_first: 58.8779296875 ms

Maintaining original items

If you want to keep your original items (with non -ISO dates), you can use the tuples:

console.time('sort_and_preserve_original');


const sortedWithOriginal = mdyArray
  .map((item) => {
    const (month, day, year) = item.date.split('/');
    return (`${year}-${month}-${day}`, item); 
  })
  .sort((a, b) => a(0) > b(0) ? 1 : -1) 
  .map(((, item)) => item); 

console.timeEnd('sort_and_preserve_original');

Output:

sort_and_preserve_original: 73.733154296875 ms

The original data are safe and the performance comes well which is considered immediately.

Key path

• Avoid the creation of the inner Objects .sort()Especially for large ranks.

• ISO 8601 is capable of setting in terms of indoor dictionary. Use the wire when you can.

• If you are not worth the date of date, Map their first map in a sequence formSort, and map them optionally.

• Sorting can create small opportunities The advantage of mass performance -Particularly in UI ingredients or real -time concepts.

Found this helpful? I work at the intersection of low code and procode development, focusing on creating performance apps and helping you to claim it again through automation. Discover more Script bytes.