Benchmark: Array append: Array spread vs. for loop

Script Preparation code:

const items = (new Array(1000)).fill(Math.random());

function testAppend(appendFn) {
  let result = [];
  for (let i = 0; i < items.length; i++) {
  	result = appendFn(result, items[i]);
  }
}

function appendSpread(arr, item) {
  return [...arr, item];
}

function appendLoop(arr, item) {
  const len = arr.length;
  const result = new Array(len + 1);

  for (let i = 0; i < len; i++) result[i] = arr[i];

  result[len] = item;
  return result;
}

Tests:

Array spread
testAppend(appendSpread);
For loop
testAppend(appendLoop)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array spread
For loop

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/104.0.0.0 Safari/537.36

Browser/OS: Chrome 104 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array spread	859.3 Ops/sec
For loop	802.6 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its components to help explain what's being tested.

**Benchmark Definition**

The provided JSON defines two test cases: `Array append: Array spread vs. for loop`. The script preparation code is included in the JSON, which shows how both the array spread (`appendSpread`) and for loop (`appendLoop`) functions are implemented to append elements to an array.

In essence, this benchmark compares the performance of these two approaches to add elements to an array:

1. **Array Spread**: This method uses the spread operator (`...`) to create a new array with the original array's elements followed by the new element.
2. **For Loop**: This method iterates over the original array using a traditional for loop, assigning each element to a new array, and finally appends the new element.

**Options Compared**

The benchmark is comparing two options:

1. **Array Spread**
2. **For Loop**

These two approaches have different characteristics:

*   **Array Spread**: This method is often faster and more concise but may not be as efficient in terms of memory usage due to creating a new array.
*   **For Loop**: This method can be more complex, but it provides better control over the iteration process.

**Pros and Cons**

Here are some pros and cons for each approach:

### Array Spread

Pros:

*   Faster execution
*   Concise code
*   Easy to read and understand

Cons:

*   Creates a new array, which can lead to increased memory usage
*   May not be as efficient for large datasets due to the overhead of creating a new array.

### For Loop

Pros:

*   Better control over iteration process
*   Can be more efficient in terms of memory usage by reusing existing arrays
*   Can handle large datasets efficiently

Cons:

*   More complex code
*   Less concise than array spread

**Other Considerations**

When implementing these approaches, consider the following factors:

*   **Data Structure**: Choose an approach that fits your data structure. If you're working with large arrays, a for loop might be more suitable.
*   **Performance**: Measure and compare performance in various scenarios to determine which approach is faster for specific use cases.

**Library and Special JS Features**

There are no specific libraries or special JavaScript features used in this benchmark. The benchmark focuses on comparing the basic array append methods using built-in JavaScript features.

**Alternatives**

Some alternatives to consider when appending elements to an array:

*   **Array.prototype.push()**: A convenient method for adding one or more elements to the end of an array.
*   **Array.prototype.concat()**: Another way to combine two arrays by creating a new array with the elements from both arrays.

Keep in mind that the choice of approach depends on your specific requirements, data structure, and performance needs.

Related benchmarks:

Array append: Array spread vs. for loop (version: 0)

Comparing performance of: Array spread vs For loop

Created: 2 years ago by: Guest

Jump to the latest result

Array spread

For loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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