Benchmark: Spread vs forEach objects

Script Preparation code:

const apps = Array.from({length: 50000}, (_, i) => ({
    id: i,
    name: 'app_name',
    price_change_number: i
}));

Tests:

Spread
const appsSpread = [...apps]
forEach push
const appsForEach = [] apps.forEach(item => appsForEach.push(item))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread
forEach push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0

Browser/OS: Firefox 141 on Windows

View result in a separate tab

Test name	Executions per second
Spread	7292.7 Ops/sec
forEach push	5610.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark titled "Spread vs forEach objects" evaluates two different methods for creating a shallow copy of an array of objects in JavaScript. Both methods are commonly used in JavaScript development, and the benchmark provides a comparative analysis of their performance.

### Methods Being Compared

1. **Spread Operator (`...`)**:
   - **Benchmark Code**: `const appsSpread = [...apps];`
   - The spread operator creates a new array by spreading the elements of the existing array into a new one. This is a concise syntax introduced in ECMAScript 2015 (ES6) and is highly readable.

2. **forEach with push**:
   - **Benchmark Code**: 
     ```javascript
     const appsForEach = [];
     apps.forEach(item => appsForEach.push(item));
     ```
   - This method utilizes the `forEach` array method to iterate through each item in the original array and pushes each item into a new array. It is more verbose compared to the spread operator.

### Performance Results

According to the benchmark results:

- **Spread Operator**:
  - **Executions Per Second**: 9393.88
- **forEach push**:
  - **Executions Per Second**: 1417.08

The spread operator significantly outperforms the `forEach` method in this benchmark, completing many more operations per second.

### Pros and Cons

#### Spread Operator (`...`)
- **Pros**:
  - Concise and syntactically cleaner.
  - Generally performs better in benchmarks, as shown in the results.
  - Suitable for copying arrays, and spreads well into other contexts (e.g., function calls).
  
- **Cons**:
  - May not be as familiar to beginners who are used to traditional looping methods (though its adoption is increasingly common).

#### forEach with push
- **Pros**:
  - Clear and explicit about the operation (iteratively pushing each item).
  - Useful in scenarios where additional operations are needed on each item during iteration.

- **Cons**:
  - More verbose, making the code harder to read.
  - Significantly lower performance as indicated by the benchmark results.
  - Less efficient due to the overhead of additional function calls and memory allocation for the push operation.

### Considerations
- When choosing between these two methods, performance is an important consideration, particularly when dealing with large arrays. The spread operator offers a more efficient solution for copying arrays or creating new arrays with content from existing ones.
- While `forEach` may be easier to understand for those new to JavaScript, becoming familiar with the spread operator can lead to more efficient and modern coding practices.
  
### Alternatives
Besides the two methods tested in this benchmark, other alternatives for copying arrays include:

1. **Array.prototype.slice()**:
   ```javascript
   const appsSlice = apps.slice();
   ```
   - This method creates a shallow copy of an array. It is an older syntax but widely compatible.

2. **Array.from()**:
   ```javascript
   const appsArrayFrom = Array.from(apps);
   ```
   - Similar to the spread operator, `Array.from()` creates a new, shallow-copied array instance from an array-like or iterable object.

3. **Using the `concat` method**:
   ```javascript
   const appsConcat = [].concat(apps);
   ```
   - This method concatenates two or more arrays, effectively creating a new array in the process.

Each of these alternatives has its pros and cons, and the choice depends on specific use cases, performance requirements, and developer preference. However, the spread operator is currently favored for its elegant syntax and performance efficiency.

Related benchmarks:

Spread vs forEach objects (version: 2)

Comparing performance of: Spread vs forEach push

Created: one year ago by: Registered User

Jump to the latest result

Spread

forEach push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):