Benchmark: Adding to an existing array from another (loop, for of, forEach, spread) [1]

Script Preparation code:

window.testData = [];
populateTestData();
window.tempData = window.testData.slice();

function populateTestData() {
  for (let i = 0; i < 100; i++) {
    const newValue = Math.random();
    window.testData.push(newValue);
  }
}

function resetData() {
  window.testData.length = 0;
  window.tempData.length = 0;
}

function testForI() {
  for (let i = 0; i < window.testData.length; i++) {
    window.tempData.push(window.testData[i]);
  }
}

function testForOf() {
  for (const item of window.testData) {
    window.tempData.push(item);
  }
}

function testSpread() {
  window.tempData.push(...window.testData);
}

function testForEach() {
  window.testData.forEach((i) => window.tempData.push(i));
}

function testSlice() {
  window.tempData = window.testData.slice();
}

Tests:

For I
resetData() populateTestData() testForI();
For Of
resetData() populateTestData() testForOf();
Spread
resetData() populateTestData() testSpread();
ForEach
resetData() populateTestData() testForEach();
Slice
resetData() populateTestData() testSlice();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For I
For Of
Spread
ForEach
Slice

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 dive into the benchmark.

**Benchmark Overview**

The benchmark is designed to measure the performance of different ways to add elements from an existing array to another array in JavaScript. The test cases are:

1. Using a traditional `for` loop
2. Using the `for...of` loop
3. Using the spread operator (`...`)
4. Using the `forEach()` method

**Options Compared**

The benchmark compares the performance of each option:

* **Traditional `for` loop**: Iterates over the array using an index variable, pushes each element to the new array.
* **`for...of` loop**: Iterates over the array using a value parameter, pushes each element to the new array.
* **Spread operator (`...`)**: Uses the spread syntax to concatenate the two arrays.
* **`forEach()` method**: Calls the provided callback function for each element in the original array, which pushes the element to the new array.

**Pros and Cons of Each Approach**

1. **Traditional `for` loop**:
	* Pros: Simple, efficient, and widely supported.
	* Cons: Can be error-prone, especially when dealing with large arrays or complex logic.
2. **`for...of` loop**:
	* Pros: More concise, easier to read, and less prone to errors than traditional `for` loops.
	* Cons: May not be as efficient as traditional `for` loops for very large arrays.
3. **Spread operator (`...`)**:
	* Pros: Concise, readable, and efficient for small arrays.
	* Cons: May be slower for very large arrays due to the overhead of creating a new array.
4. **`forEach()` method**:
	* Pros: Simple, concise, and easy to read.
	* Cons: May not be as efficient as traditional `for` loops or spread operator for very large arrays.

**Library Used**

None explicitly mentioned in this benchmark, but note that the `forEach()` method is a built-in JavaScript function.

**Special JS Feature or Syntax**

No special features or syntax are used in this benchmark. The focus is on comparing the performance of different iteration methods.

**Other Alternatives**

Other alternatives for adding elements from an existing array to another array include:

* Using `Array.prototype.concat()`
* Using `Array.prototype.push()` with a loop
* Using `Array.prototype.reduce()`

Related benchmarks:

Adding to an existing array from another (loop, for of, forEach, spread) [1] (version: 0)

Comparing performance of: For I vs For Of vs Spread vs ForEach vs Slice

Created: 3 years ago by: Guest

Jump to the latest result

For I

For Of

Spread

ForEach

Slice

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