Benchmark: fill + map vs push

Tests:

fill + map
let a = Array(600000).fill().map(() => ({a: 1}));
push
let a = []; for(let i = 0; i< 600000;i++) a.push({a: 1});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
fill + map
push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 104 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
fill + map	41.0 Ops/sec
push	46.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the test case and explain what's being tested.

**Benchmark Definition**

The benchmark definition is a JSON object that describes the test scenario. In this case, we have two test cases:

1. "fill + map": This test case creates an array of 600,000 elements using `Array(600000).fill().map(() => ({a: 1}))`. The purpose of this test is to measure how fast it can create and populate an array using the `.fill()` method followed by the `.map()` method.
2. "push": This test case creates an empty array and then pushes 600,000 elements onto it using a `for` loop. The goal here is to see how fast it can add a large number of elements to an array using the `push()` method.

**Options Compared**

In this test case, we're comparing two approaches:

1. Using `.fill()` followed by `.map()`: This approach creates an array with the specified length and then maps over each element, applying a function to create a new object.
2. Using a `for` loop with `push()`: This approach creates an empty array and then adds 600,000 elements to it using a `for` loop.

**Pros and Cons of Each Approach**

1. `.fill()` followed by `.map()`:
	* Pros: This approach is concise and often faster because it uses native methods that are optimized for performance.
	* Cons: It can be less intuitive for some developers, as it requires understanding the behavior of these two methods together.
2. `for` loop with `push()`: 
	* Pros: This approach can be more straightforward to understand, especially for those familiar with traditional loops.
	* Cons: It's often slower because it involves a separate push operation for each element, which can lead to increased overhead.

**Library Used**

In the benchmark definition, there is no explicit library used. However, the `.map()` method uses the Array.prototype object, which includes various utility methods and functions provided by JavaScript.

**Special JS Features or Syntax**

There are no special features or syntax mentioned in this test case.

Now, let's look at the latest benchmark result:

The results show the performance of each test case on a specific browser version (Chrome 104) running on a Mac OS X 10.15.7 device. The `ExecutionsPerSecond` value represents how many iterations the test can complete in one second.

Based on these results, we can see that the `push()` approach is slightly faster than the `.fill()` followed by `.map()` approach, with approximately 5-6 executions per second more for the same iteration count. However, please note that this result may vary depending on your specific environment and JavaScript engine.

**Other Alternatives**

There are other ways to create an array of elements in JavaScript, such as:

* Using `Array.from()` with a function or array initializer
* Creating an array using a constructor (e.g., `new Array(600000)`)

Keep in mind that these alternatives may have their own trade-offs in terms of performance, readability, and maintainability.

Related benchmarks:

fill + map vs push (version: 0)

Comparing performance of: fill + map vs push

Created: 2 years ago by: Guest

Jump to the latest result

fill + map

push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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