Benchmark: forEach vs map, 100k take 2!

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Tests:

forEach
const arr = _.range(0,100000) arr.forEach(x => arr[x] = x * 2) console.log(arr)
map
const arr = _.range(0,100000) const newArr = arr.map(x => x * 2) console.log(newArr)
map take 2
const newArr = _.range(0,100000).map(x => x * 2); console.log(newArr)
vanilla
const arr = _.range(0,100000); const length = arr.length; for (let i = 0; i < length; i++) { arr[i] = arr[i] * 2 } console.log(arr);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
map
map take 2
vanilla

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark test and explain what's being tested.

**Benchmark Test**

The benchmark test is comparing four different approaches to achieve a specific task:

1. **forEach**: Using the `Array.prototype.forEach()` method to iterate over an array and modify its elements.
2. **map**: Using the `Array.prototype.map()` method to create a new array with transformed elements from the original array.
3. **map take 2** ( alias: vanilla ): Using a modified version of the `map` approach, but without creating a new array, instead modifying the original array directly.

The test case uses the Lodash library (`lodash.js`) for its `range()` function, which generates an array with a specified number of elements.

**Options Compared**

* **forEach**: Iterates over the array using `Array.prototype.forEach()`, assigning each element's value to the corresponding index in the original array.
* **map**: Creates a new array by applying a transformation function to each element in the original array, returning the new array with transformed elements.
* **map take 2 (vanilla)**: Similar to `map`, but modifies the original array directly without creating a new one.

**Pros and Cons**

1. **forEach**:
	* Pros:
		+ Easy to read and understand.
		+ Allows for early exit if iteration is broken.
	* Cons:
		+ Can be slower due to the overhead of iterating over each element in the array.
2. **map**:
	* Pros:
		+ Returns a new array, which can simplify downstream processing.
		+ Can be faster since it avoids modifying the original array.
	* Cons:
		+ Requires more memory for the newly created array.
3. **map take 2 (vanilla)**:
	* Pros:
		+ Avoids creating a new array, reducing memory usage.
	* Cons:
		+ May require additional bookkeeping to ensure correct results.

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides various functions for tasks such as array manipulation, string concatenation, and more. The `range()` function used in the benchmark test generates an array with a specified number of elements.

**Special JS Feature/ Syntax: `const arr = _.range(0,100000)`**

The `_` symbol is often referred to as "lodash dot" or "underscore dot." It's a convention used by Lodash developers to access its functions and methods. In this case, it allows the developer to use the `range()` function from Lodash without prefixing the function name with the entire library name.

**Other Alternatives**

For those interested in exploring alternative approaches, here are some options:

* Using `Array.prototype.forEach` in combination with a `for...of` loop or `while` loop for iteration.
* Implementing the transformation logic manually using a traditional `for` loop or recursion (though this is not recommended due to performance and readability concerns).
* Utilizing other libraries like Underscore.js, Ramda, or Immutable.js for array manipulation tasks.

Keep in mind that these alternatives might have different trade-offs in terms of performance, memory usage, and code readability.

Related benchmarks:

forEach vs map, 100k take 2! (version: 0)

Comparing performance of: forEach vs map vs map take 2 vs vanilla

Created: 6 years ago by: Guest

Jump to the latest result

forEach

map

map take 2

vanilla

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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