Benchmark: Array creation with Array.reduce vs for loop vs Array.forEach

Script Preparation code:

// Create an array of 1000 random intergers between 1 and 10000
var arrRandom = [];
for(var intCtr=0; intCtr<1000; intCtr++) {
  arrRandom.push(Math.floor(Math.random() * Math.floor(10000)));
}

function reduceCallback(accum, curr) {
	return [
      ...accum,
      curr
     ];
}

function doRedeuce(pArray) {
	return pArray.reduce(reduceCallback, []);
}
function doLoop(pArray) {
	var newArray = [];
	for(var intCtr=0; intCtr<pArray.length; intCtr++) {
      newArray.push(pArray[intCtr]);
	}
	return newArray;
}
function doForEach(pArray) {
	var newArray = [];
	pArray.forEach(function(item) {
      newArray.push(pArray[item]);
	});
  	return newArray
}

Tests:

reduce
var redeuceResult=0; redeuceResult = doRedeuce(arrRandom);
for loop
var loopResult=0; loopResult = doLoop(arrRandom);
forEach
var forEachResult=0 forEachResult = doForEach(arrRandom)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
for loop
forEach

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 gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares three different ways to create a new array containing the same elements as an existing array:

* **`reduce()`:** This method uses a callback function that iterates over each element of the original array, accumulating the result in a new array.

**Pros:**  Concise and often considered more functional than iterative approaches. Can be very powerful for complex transformations.
   **Cons:** Can be less intuitive to read than a `for` loop for simple tasks like copying elements.

* **`for` loop:** This traditional approach explicitly iterates through each element of the original array, copying it to a new array using indexing.

**Pros:**  Very straightforward and widely understood.
   **Cons:** Can be more verbose than other methods, especially when dealing with complex logic.

* **`forEach()`:** This method iterates over each element of the original array, executing a provided callback function for each element.  It doesn't directly build a new array, but you have to manage that separately within the callback.

**Pros:**  Clean and readable syntax for simple operations on each element.
   **Cons:** Requires additional logic (like using a separate array) to actually create the new array. Not as efficient as `reduce()` or `for` loops when directly copying elements.

**Other Alternatives:**

* **`Array.concat()`:** This method creates a new array by concatenating all elements of one or more arrays together. It's another simple option for creating a copy of an existing array, but it doesn't offer the same level of control as `reduce()`, `for` loops, or `forEach()`.
* **Spreading Syntax (`...`)**: In modern JavaScript (ES6+), you can use the spread syntax to easily create a new array containing all elements of an existing array. This is often the most concise and readable option for simple copying:

```javascript
   const newArray = [...arrRandom]; 
   ```

**Important Considerations:**

* **Efficiency:** `for` loops are generally the fastest approach for simple element-by-element operations, followed closely by `reduce()`. `forEach()` is typically slower due to its callback overhead.
* **Readability:**  Choose the method that best communicates your intent and makes your code easy to understand.

* **Task Complexity:** For complex transformations or data manipulation, `reduce()` often provides a more elegant and expressive solution compared to `for` loops or `forEach()`.

Related benchmarks:

Array creation with Array.reduce vs for loop vs Array.forEach (version: 0)

A test pushing 1000 random numbers, 1 - 10000

Comparing performance of: reduce vs for loop vs forEach

Created: 7 years ago by: Guest

Jump to the latest result

reduce

for loop

forEach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):