Benchmark: Iterate Array.from(n, () => {}) vs [...Array(n)]

Tests:

Array.from()
const arr = Array.from({ length: 1000 }, (_value, index) => { return index % 2 === 0 && {a: 1, b: 1}; }).filter(Boolean)
[...Array(n)]
const arr1 = [...Array(1000)].reduce((items, _value, index) => { if (index % 2 === 0) { items.push({a: 1, b: 1}); } return items; }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/111.0

Browser/OS: Firefox 111 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.from()	31213.9 Ops/sec
[...Array(n)]	86624.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The goal of these benchmarks is to compare different approaches to performing a specific task, in this case, creating an array with some initial values.

**Script Preparation Code and Html Preparation Code**

In the provided benchmark definition json, there are two fields: "Script Preparation Code" and "Html Preparation Code". These fields are usually used for setting up the environment or injecting dependencies into the test code. In this case, they are empty, which means the test code will be executed in a blank slate.

**Individual Test Cases**

There are two individual test cases:

1. **Array.from()**
The benchmark definition for this test case is:
```javascript
const arr = Array.from({ length: 1000 }, (_value, index) => {
  return index % 2 === 0 && {a: 1, b: 1};
}).filter(Boolean);
```
This code creates an array using the `Array.from()` method, which takes two arguments:

* An object with a `length` property specifying the size of the array.
* A callback function that returns the value for each element in the array.

The callback function uses the modulo operator (`%`) to check if the index is even (i.e., `index % 2 === 0`). If true, it returns an object with two properties: `a` and `b`, both set to `1`.

The resulting array is then filtered using the `filter()` method, which removes any falsy values from the array.

**[...Array(n)]**

The benchmark definition for this test case is:
```javascript
const arr1 = [...Array(1000)].reduce((items, _value, index) => {
  if (index % 2 === 0) {
    items.push({a: 1, b: 1});
  }
  return items;
}, []);
```
This code creates an array using the spread operator (`[...Array(n)]`), which takes one argument:

* An integer `n`, specifying the size of the array.

The resulting array is then reduced using the `reduce()` method, which applies a callback function to each element in the array. The callback function checks if the index is even and pushes an object with two properties (`a` and `b`) to the `items` array if true.

**Library Usage**

In both test cases, no external libraries are used.

**Special JS Feature or Syntax**

Neither test case uses any special JavaScript features or syntax beyond what's considered standard in modern JavaScript.

**Alternatives**

To create an array with some initial values, there are a few alternative approaches:

1. **Array.prototype.map()**: Instead of using `Array.from()` and filtering the result, you can use the `map()` method to directly create the desired array:
```javascript
const arr = Array(1000).fill(null).map((_, index) => {
  return index % 2 === 0 && {a: 1, b: 1};
});
```
However, this approach creates an array of `undefined` values first and then maps over it, which might be less efficient than using `Array.from()`.

2. **for...of loop**: You can use a `for...of` loop to create the array:
```javascript
const arr = [];
for (let i = 0; i < 1000; i++) {
  if (i % 2 === 0) {
    arr.push({a: 1, b: 1});
  }
}
```
However, this approach is generally slower than using `Array.from()` and filtering the result.

In summary, both test cases use valid approaches to create an array with some initial values. The choice between them depends on your specific use case and performance requirements.

Related benchmarks:

Iterate Array.from(n, () => {}) vs [...Array(n)] (version: 1)

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

Created: one year ago by: Registered User

Jump to the latest result

Array.from()

[...Array(n)]

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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