Benchmark: array map vs loop

Tests:

for loop
const s = 100000; const test = []; for (i = 0; i < s; ++i) { test[i] = i; } const result = []; for(i=0; i<s; ++i){ const t = test[i]; result.push(t * t); }
for of
const s = 100000; const test = []; for (i = 0; i < s; ++i) { test[i] = i; } const result = []; for(const t of test){ result.push(t * t); }
map
const s = 100000; const test = []; for (i = 0; i < s; ++i) { test[i] = i; } const result = test.map(t => t * t);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for loop
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 loop	186.6 Ops/sec
for of	196.1 Ops/sec
map	200.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and benchmark.

**Benchmark Definition**

The benchmark is designed to compare three approaches: `for` loop, `for...of` loop, and `map()` function. The tests aim to calculate the square of each element in an array by iterating over it.

**Options Compared**

1. **`for` Loop**: This approach uses a traditional `for` loop with an index variable (`i`) to iterate over the array.
2. **`for...of` Loop**: This approach uses the `for...of` loop, which is a newer iteration method that allows iterating directly over arrays without needing an index variable.
3. **`map()` Function**: This approach uses the `map()` function to create a new array by applying a transformation (squaring) to each element of the original array.

**Pros and Cons**

1. **`for` Loop**:
	* Pros: Simple, efficient, and well-supported in all JavaScript engines.
	* Cons: Can be verbose and error-prone if not used carefully.
2. **`for...of` Loop**:
	* Pros: More concise and readable than traditional `for` loops, with less chance of errors due to the automatic indexing.
	* Cons: Limited support for certain edge cases (e.g., arrays with complex indices).
3. **`map()` Function**:
	* Pros: Concise, efficient, and widely supported. It also preserves the original array's length and can be easily chained for more transformations.
	* Cons: May incur additional overhead due to the creation of a new array, which can impact performance in certain scenarios.

**Libraries and Special JS Features**

There are no libraries mentioned in the provided code. However, note that `map()` function is a built-in JavaScript method, so it's not an external library. There are no special JavaScript features mentioned either.

**Other Considerations**

The benchmark measures the executions per second (EPS) for each approach on a specific test case, which involves creating a large array and performing a simple operation on its elements. The results provide insights into the performance characteristics of each approach under these specific conditions.

If you're interested in exploring other alternatives or modifying this benchmark, consider the following:

* Use different testing scenarios or array sizes to evaluate performance across various ranges.
* Introduce additional operations within the loop body (e.g., calculations, string manipulations) to better simulate real-world workloads.
* Experiment with different data structures, such as objects or sets, to compare performance characteristics.

Keep in mind that JavaScript engine optimizations and the specifics of each test case can influence results.

Related benchmarks:

array map vs loop (version: 0)

Comparing performance of: for loop vs for of vs map

Created: 2 years ago by: Guest

Jump to the latest result

for loop

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