Benchmark: creating array - MeasureThat.net

Tests:

apply
Array.apply(null, {length: 100000}).map((_,ind)=> ind + 1)
fill
Array(100000).fill().map((e,i)=>i+1)
destructure
[...Array(100000)].map((e, i)=> i + 1)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
apply
fill
destructure

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0

Browser/OS: Firefox 86 on Windows

View result in a separate tab

Test name	Executions per second
apply	156.3 Ops/sec
fill	252.4 Ops/sec
destructure	178.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript code is crucial in understanding how different approaches affect execution time and overall efficiency.

**Benchmark Overview**

The provided benchmark compares three methods for creating an array with 100,000 elements:

1. `Array.apply(null, {length: 100000}).map((_,ind)=> ind + 1)`
2. `Array(100000).fill().map((e,i)=>i+1)`
3. `[...Array(100000)].map((e, i)=> i + 1)`

**Approach Comparison**

Let's break down each approach:

### 1. `Array.apply(null, {length: 100000}).map((_,ind)=> ind + 1)` - **`apply()` method with an object literal**

This method uses the `apply()` function to create a new array from an object literal with a `length` property set to 100,000. The `map()` function is then applied to this new array.

Pros:

* Allows for fine-grained control over the array creation process
* Can be more efficient than other methods in some cases (e.g., when creating arrays with a specific structure)

Cons:

* Can lead to slower performance due to the overhead of creating an object literal and calling `apply()`
* May not perform as well on older browsers or systems that don't support modern JavaScript features

### 2. `Array(100000).fill().map((e,i)=>i+1)` - **`fill()` method with a large array**

This method creates a new array of length 100,000 using the `fill()` function and then maps over it to add 1 to each element.

Pros:

* Fast and efficient, as `fill()` is a built-in function optimized for performance
* Works well on most modern browsers and systems

Cons:

* Requires an initial allocation of memory, which can be resource-intensive
* May not work well if the array needs to be modified after creation

### 3. `[...Array(100000)].map((e, i)=> i + 1)` - **Destructuring spread operator**

This method uses the destructuring spread operator (`[...]`) to create a new array from an existing one (in this case, `Array(100000)`) and then maps over it to add 1 to each element.

Pros:

* Fast and efficient, as `map()` is a built-in function optimized for performance
* Works well on most modern browsers and systems

Cons:

* May not work in older browsers or systems that don't support the spread operator ( ECMAScript 2015+ )
* Can lead to slower performance if the original array needs to be modified after creation

**Library Use**

None of the benchmark methods use any external libraries.

**Special JS Features/Syntax**

The `apply()` method and destructuring spread operator (`[...]`) are modern JavaScript features introduced in ECMAScript 2015 (ES6). The `fill()` method is a built-in function that has been part of the JavaScript language since its inception, but it was not widely supported until ES5.

**Alternatives**

If you need to measure the performance of other array creation methods, here are some alternatives:

* `Array.from()`: Creates an array from an iterable (e.g., an array or a string).
* `new Array(size)`: Creates a new empty array with the specified size.
* Using `setInterval()` and `clearInterval()` to create an array of timed events.

Keep in mind that each method has its own trade-offs, and the best approach depends on your specific use case and performance requirements.

Related benchmarks:

creating array (version: 0)

Comparing performance of: apply vs fill vs destructure

Created: 3 years ago by: Guest

Jump to the latest result

apply

fill

destructure

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):