Benchmark: for of vs map with object

Script Preparation code:

var arr = new Array(10).fill({aa:1,bb:2,cc:3})

Tests:

for of
const res = []; for (const x of arr) { res.push({...x}) }
map
arr.map((x) => ({...x}))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for of
map

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/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for of	7110265.5 Ops/sec
map	7582440.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark in detail, breaking it down into smaller parts.

**Benchmark Description**

The benchmark compares two approaches for iterating over an object's values: `for...of` loop and `Array.prototype.map()` method.

**Script Preparation Code**

The script preparation code creates a JavaScript array (`arr`) with 10 objects, each containing three properties (`aa`, `bb`, and `cc`). This array is used as the input data for both test cases.

```javascript
var arr = new Array(10).fill({aa:1,bb:2,cc:3});
```

**Html Preparation Code**

The html preparation code is empty, which means that no HTML elements are involved in this benchmark. The focus is solely on JavaScript execution performance.

**Test Cases**

There are two test cases:

### Test Case 1: `for...of` Loop

```javascript
const res = [];
for (const x of arr) {
    res.push({...x});
}
```

This test case uses a `for...of` loop to iterate over the `arr` array and push an object copy of each element into the resulting array (`res`). The `{...x}` syntax is used to create a shallow copy of each object in the array.

**Test Case 2: `Array.prototype.map()` Method**

```javascript
arr.map((x) => ({...x}));
```

This test case uses the `Array.prototype.map()` method to iterate over the `arr` array and create an array of new objects by copying each element. The `(x) => {...x}` syntax is a callback function that takes each element of the array as input and returns a new object copy.

**Library Used**

Neither test case explicitly uses any external libraries, but the `Array.prototype.map()` method does utilize the built-in `Array` prototype methods. However, this is considered a standard part of the JavaScript API, so it's not typically counted as an external library dependency.

**Special JS Feature/Syntax**

Both test cases use modern JavaScript syntax features:

* The `for...of` loop (introduced in ECMAScript 2015)
* Object destructuring (`{...x}`)

These features are widely supported across modern browsers and engines, including the ones used by MeasureThat.net.

**Pros and Cons of Each Approach**

### `for...of` Loop

Pros:

* Can be more efficient for small arrays due to cache locality
* More explicit control over iteration and indexing

Cons:

* May require more manual memory management (e.g., array resizing)
* Less flexible than `Array.prototype.map()` for large datasets or complex transformations

### `Array.prototype.map()`

Pros:

* More concise and expressive syntax
* Can handle large arrays and complex data processing pipelines
* Built-in support in modern browsers and engines

Cons:

* May incur additional overhead due to function call and stack management
* Less control over iteration and indexing compared to the `for...of` loop

**Other Alternatives**

For larger datasets or more complex transformations, other approaches might be considered:

* Using `Array.prototype.forEach()` instead of `map()`, which returns `undefined` when all elements have been processed.
* Utilizing libraries like Lodash or Ramda for functional programming and data processing.
* Employing native Web Workers or WebAssembly for parallelized computations.

Keep in mind that the performance characteristics of these alternatives may vary depending on specific use cases, hardware, and engine versions.

Related benchmarks:

for of vs map with object (version: 0)

Comparing performance of: for of vs map

Created: 2 years ago by: Guest

Jump to the latest result

for of

map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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