Benchmark: Array creation (preallocated vs from fixed)

Script Preparation code:

var objs = [];
for (var i = 0; i < 1000; i++) {
    objs.push({
        foo: {baz: null},
        bar: null
    });
}
var fieldName = "foo"

Tests:

Array.from
const out = Array.from(objs, (o) => o[fieldName]);
Preallocate null
const out = new Array(objs.length).fill(null); for (let i = 0; i < objs.length; i++) { out[i] = objs[i][fieldName] }
Preallocate 0
const out = new Array(objs.length).fill(0); for (let i = 0; i < objs.length; i++) { out[i] = objs[i][fieldName] }
Preallocate empty object
const out = new Array(objs.length).fill({}); for (let i = 0; i < objs.length; i++) { out[i] = objs[i][fieldName] }
Unfilled initial array
const out = new Array(objs.length); for (let i = 0; i < objs.length; i++) { out[i] = objs[i][fieldName] }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Preallocate null
Preallocate 0
Preallocate empty object
Unfilled initial array

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.0

View result in a separate tab

Test name	Executions per second
Array.from	22745.8 Ops/sec
Preallocate null	8556.7 Ops/sec
Preallocate 0	8553.6 Ops/sec
Preallocate empty object	7945.2 Ops/sec
Unfilled initial array	8589.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark.

**What is being tested?**

The provided benchmark tests four different approaches to create an array of objects with a specific field (`fieldName`) in JavaScript:

1. `Array.from()`
2. Preallocating an initial empty array and then filling it with null, 0, or an empty object values.
3. Unprefilling the initial array.

**Options compared:**

The four test cases compare the performance of different approaches to create an array of objects with a specific field:

1. **`Array.from()`**: Uses the `Array.from()` method to create a new array from an existing array (`objs`) and maps each object in the array to a new object with the specified field.
2. **Preallocating null**: Creates a preallocated array of the same length as `objs`, fills it with null values, and then iterates over the original array to set the field in each object.
3. **Preallocating 0**: Similar to the previous approach but uses 0 values instead of null.
4. **Preallocating empty object**: Creates a preallocated array of the same length as `objs` and fills it with empty objects, then iterates over the original array to set the field in each object.

**Pros and cons:**

Here's a brief summary of the pros and cons of each approach:

* **`Array.from()`**: Pros:
	+ Simple and concise syntax.
	+ Can be faster for large arrays due to optimized implementation.
* Cons:
	+ May require additional memory allocation.
	+ May not be suitable for very large arrays due to stack size limitations.
* **Preallocating null, 0, or empty object**:
	+ Pros:
		- No additional memory allocation required.
		- Can be faster for large arrays since no new objects are created.
	+ Cons:
		- More complex syntax.
		- May not work correctly if the field value is mutable (e.g., an array).
* **Unprefilling the initial array**:
	+ Pros:
		- Simple and concise syntax.
		- No additional memory allocation required.
	+ Cons:
		- Can lead to performance issues if the initial array is very large.

**Library and special JS features:**

This benchmark does not use any external libraries. However, it relies on JavaScript's built-in `Array` class and its methods (e.g., `push()`, `map()`).

The benchmark also uses modern JavaScript syntax features, such as:

* Arrow functions (`(o) => o[fieldName]`)
* Template literals (`${fieldName}`)

**Other alternatives:**

Other approaches to create an array of objects with a specific field could include using the `reduce()` method or a for loop with array indices. However, these approaches may not be as concise or efficient as the ones tested in this benchmark.

Here's some example code for each alternative approach:

* Using `reduce()`:
```javascript
const out = objs.reduce((acc, obj) => acc.push({ [fieldName]: obj[fieldName] }), []);
```
* Using a for loop with array indices:
```javascript
const out = [];
for (let i = 0; i < objs.length; i++) {
  out[i] = { [fieldName]: objs[i][fieldName] };
}
```
Keep in mind that these alternatives may have different performance characteristics and syntax requirements compared to the approaches tested in this benchmark.

Related benchmarks:

Array creation (preallocated vs from fixed) (version: 0)

Comparing performance of: Array.from vs Preallocate null vs Preallocate 0 vs Preallocate empty object vs Unfilled initial array

Created: one year ago by: Guest

Jump to the latest result

Array.from

Preallocate null

Preallocate 0

Preallocate empty object

Unfilled initial array

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