Benchmark: Array.from() vs new Array() vs [..Array()]

Script Preparation code:

var mapfn = (_, index) => {
    return index * 2 % 10;
}

Tests:

new Array()
new Array(500).fill(500).map(mapfn)
Array.from()
Array.from({ length: 500 }, mapfn)
[...Array()]
[...Array(500)].map(mapfn)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
new Array()
Array.from()
[...Array()]

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0

Browser/OS: Chrome 141 on Windows

View result in a separate tab

Test name	Executions per second
new Array()	1024004.5 Ops/sec
Array.from()	78492.5 Ops/sec
[...Array()]	977231.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

The provided JSON represents a benchmark test case on MeasureThat.net, which compares three approaches for creating filled arrays: `new Array()`, `Array.from()` and `[...Array()]`.

**Options being compared:**

1. **`new Array()`**: Creates an empty array and then fills it with the specified number of elements using the `fill()` method.
2. **`Array.from()`**: Creates a new array from an existing iterable (in this case, an array) by providing a mapping function to transform each element.
3. **`[...Array()]`**: Creates a new array by spreading an empty array and then filling it with the specified number of elements.

**Pros and Cons:**

1. **`new Array()`**:
	* Pros: Generally considered a simple and efficient approach.
	* Cons: Can be slower than the other two options for large arrays, as it involves creating an intermediate array using `fill()`.
2. **`Array.from()`**:
	* Pros: Faster and more memory-efficient than `new Array()` for large arrays, since it avoids creating an intermediate array.
	* Cons: Requires an existing iterable (in this case, an empty array) to be passed as an argument, which can add complexity to the code.
3. **`[...Array()]`**:
	* Pros: Simple and efficient approach that creates a new array by spreading an empty array.
	* Cons: May not be as widely supported or well-known as `new Array()`.

**Library usage:**

None of the options explicitly use any libraries, but they do rely on built-in JavaScript features like `Array.prototype.fill()` and array spread syntax (`[...array]`).

**Special JS feature/syntax:**

The benchmark test case uses a few special JavaScript features:

1. **Arrow functions**: The `mapfn` variable is defined as an arrow function, which is a concise way to define small anonymous functions.
2. **Template literals**: The `var mapfn = (_, index) => {\r\n    return index * 2 % 10;\r\n}` line uses template literals to create a multiline string.

**Other alternatives:**

If you need to compare the performance of other array creation methods, some alternatives could be:

1. **`Array.from()` with `map()`**: Creating an empty array and then using `map()` to fill it.
2. **`Array.prototype.slice()`**: Using `slice()` to create a shallow copy of an existing array and then filling it with new elements.
3. **`Uint8Array()` or `Int32Array()`**: Using typed arrays to create arrays optimized for specific data types.

These alternatives might have different performance characteristics depending on the specific use case and requirements.

Related benchmarks:

Array.from() vs new Array() vs [..Array()] (version: 0)

Testing the difference between creating filled arrays.

Comparing performance of: new Array() vs Array.from() vs [...Array()]

Created: 3 years ago by: Guest

Jump to the latest result

new Array()

Array.from()

[...Array()]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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