Benchmark: Push spread vs forEach vs for of

Script Preparation code:

const array = [];

for (let i = 0; i < 100000; i++) {
    array.push(`${i}`)
}

const finalArray = [];

Tests:

For each
const array = []; for (let i = 0; i < 100000; i++) { array.push(`${i}`) } const finalArray = []; array.forEach((el) => {finalArray.push(`${el}-test`)})
push spread
const array = []; for (let i = 0; i < 100000; i++) { array.push(`${i}`) } const finalArray = []; finalArray.push(...array.map((el) => `${el}-test`))
for of
const array = []; for (let i = 0; i < 100000; i++) { array.push(`${i}`) } const finalArray = []; for (const el of array) { finalArray.push(`${el}-test`) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For each
push spread
for of

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.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark on three different approaches to push elements into an array: `forEach`, `push spread`, and `for of`. The benchmark aims to compare the performance of these three methods in a realistic scenario, where an array is populated with 100,000 elements using a loop and then iterated over to append a suffix to each element.

**Script Preparation Code**

The script preparation code initializes an empty array `array` using the `const` keyword. A nested loop constructs the array by pushing strings onto it using the template literal syntax `${i}`. Another variable `finalArray` is declared, which will be used to accumulate the results.

**Html Preparation Code**

No HTML preparation code is provided, suggesting that this benchmark focuses solely on JavaScript performance characteristics and does not involve DOM-related tasks.

**Individual Test Cases**

There are three test cases:

1. **For Each**: This approach uses the `forEach` method to iterate over the array, pushing each element onto the `finalArray`.
2. **Push Spread**: This approach uses the spread operator (`...`) to concatenate the elements of the original array onto the `finalArray`.
3. **For Of**: This approach uses a `for...of` loop to iterate over the array, pushing each element onto the `finalArray`.

**Library Usage**

None of the provided benchmark code snippet appears to use any JavaScript libraries.

**Special JS Features or Syntax**

The template literal syntax `${i}` is used in all three test cases. This feature allows for string interpolation using backticks (``) instead of concatenation.

**Pros and Cons of Each Approach**

Here's a brief summary:

1. **For Each**:
	* Pros: Easy to read and maintain, as it leverages the familiar `forEach` method.
	* Cons: May have performance overhead due to the explicit callback function.
2. **Push Spread**:
	* Pros: Concise and expressive code, leveraging modern JavaScript features like spread operators.
	* Cons: May be less readable for those unfamiliar with this syntax, and performance results may vary depending on browser support.
3. **For Of**:
	* Pros: Efficient and concise, as it avoids the need for explicit loops or callback functions.
	* Cons: Less familiar to some developers, especially those without experience with `for...of` loops.

**Other Alternatives**

If you were to modify these benchmark test cases to explore other approaches, consider the following:

1. **Using a library**: Introduce a third-party library like Lodash or Ramda to demonstrate how existing libraries can optimize performance for common tasks.
2. **Asynchronous operations**: Add asynchronous operations using `async/await` or Promises to evaluate the impact of synchronization on performance.
3. **Array construction methods**: Experiment with alternative array construction methods, such as `Array.from()`, `Array.prototype.concat()`, or even `new Array(100000)`.

By exploring these variations, you can gain a deeper understanding of the trade-offs involved in optimizing JavaScript performance for real-world applications.

Related benchmarks:

Push spread vs forEach vs for of (version: 0)

Test

Comparing performance of: For each vs push spread vs for of

Created: 2 years ago by: Guest

Jump to the latest result

For each

push spread

for of

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