Benchmark: new Intl.DateTimeFormat vs new Date().toLocaleDateString() vs re-using formatter

Script Preparation code:

var options = {
  year: 'numeric', month: 'numeric', day: 'numeric',
  hour: 'numeric', minute: 'numeric', second: 'numeric',
  hour12: false,
  fractionalSecondDigits: 3,
};
var formatter = new Intl.DateTimeFormat('en-US', options);

Tests:

new Date()
(new Date()).toISOString().trim().replace('T', ' ').replace('Z', '')
Intl.DateTimeFormat()
new Intl.DateTimeFormat('en-US', options).format(new Date())
formatter
formatter.format(new Date())

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
new Date()
Intl.DateTimeFormat()
formatter

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Browser/OS: Chrome 141 on Mac OS X 10.15.7

View result in a separate tab

new Date()

1.7M/s

formatter

685K/s

Intl.DateTimeFormat()

30K/s

View exact numbers

Test name	Executions per second
✓ new Date()	1,651,587 Ops/sec
formatter	685,494 Ops/sec
Intl.DateTimeFormat()	29,953 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark is designed to compare the performance of three approaches for formatting dates in JavaScript:

1. `new Date()`: This approach uses the built-in `Date` constructor to create a date object, which is then formatted using the `toLocaleDateString()` method.
2. `new Intl.DateTimeFormat()`: This approach uses the `Intl.DateTimeFormat` API to create an internationalized date format and format the current date.
3. Re-using a formatter: This approach creates a single instance of the `Intl.DateTimeFormat` object with specific options and re-uses it to format multiple dates.

**Options Comparison**

The benchmark compares different settings for the `Intl.DateTimeFormat` approach:

* `year`, `month`, `day`, `hour`, `minute`, and `second`: These options control the formatting of individual date components.
* `hour12`: This option determines whether the hour is formatted in 12-hour mode (e.g., "2 PM") or 24-hour mode (e.g., "14").
* `fractionalSecondDigits`: This option controls the number of decimal places to display for fractional seconds.

**Pros and Cons**

Here are some pros and cons of each approach:

* **new Date()**: Pros:
	+ Simple and easy to use.
	+ Fast execution time due to its simplicity.
* Cons:
	+ Less flexible than other approaches, as it uses a fixed format.
	+ May not produce consistent results across different locales.
* **new Intl.DateTimeFormat()**: Pros:
	+ Highly customizable with various options.
	+ Produces consistent results across different locales.
* Cons:
	+ More complex and harder to use than `new Date()`.
	+ Execution time may be slower due to the overhead of creating an internationalized date format object.
* Re-using a formatter: Pros:
	+ Can be faster than creating multiple instances of the `Intl.DateTimeFormat` object, especially for large datasets.
	+ Reduces memory allocation and deallocation overhead.
* Cons:
	+ May lead to increased memory usage if not used carefully.

**Library: Intl.DateTimeFormat**

The `Intl.DateTimeFormat` API is part of the ECMAScript Internationalization API, which provides a way to format dates and numbers according to the user's locale. The library offers various options for customizing the formatting, including support for different date components, number formats, and locale-specific features.

**Special JS Feature: Template Literals**

The `new Date()` approach uses template literals (`(new Date()).toISOString().trim().replace('T', ' ').replace('Z', '')`) to create a formatted string. This feature is available in ECMAScript 2015 (ES6) and later versions.

Now, let's summarize the results:

* **new Date()**: Fastest execution time, but less flexible.
* **Intl.DateTimeFormat()**: Most customizable option, but slower execution time due to internationalization overhead.
* Re-using a formatter: Can be faster than creating multiple instances of `Intl.DateTimeFormat`, but may lead to increased memory usage.

Other alternatives for date formatting in JavaScript include:

* Using the `Date.prototype.toISOString()` method, which provides a standardized format for dates and times.
* Utilizing libraries like Moment.js or DayPilot, which offer more advanced date formatting features and customization options.

new Intl.DateTimeFormat vs new Date().toLocaleDateString() vs re-using formatter (version: 0)

Comparing performance of: `new Date() vs Intl.DateTimeFormat() vs formatter`

Created: 3 years ago by: Guest

Go to the latest result

new Date()

Intl.DateTimeFormat()

formatter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

new Intl.DateTimeFormat vs new Date().toLocaleDateString() vs re-using formatter (version: 0)

Comparing performance of: new Date() vs Intl.DateTimeFormat() vs formatter

Created: 3 years ago by: Guest

Go to the latest result

new Date()

Intl.DateTimeFormat()

formatter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `new Date() vs Intl.DateTimeFormat() vs formatter`