Benchmark: Array spread vs concat vs others for adding an item and getting an immutable copy

Script Preparation code:

const array = [
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
  { foo: 'bar' },
];

Tests:

Create a copy using the spread operator
const newArray = [...array, { foo: 'bar' }];
Create a copy using array.concat
const newArray = array.concat({ foo: 'bar' });
Create a copy manually in a loop using push
const newArray = []; const len = array.length; for (let i = 0; i < len; i++) { newArray.push(array[i]); } newArray.push({ foo: 'bar' });
Create a copy manually in a loop by index
const len = array.length; const newArray = new Array(len + 1); for (let i = 0; i < len; i++) { newArray[i] = array[i]; } newArray[len] = { foo: 'bar' };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Create a copy using the spread operator
Create a copy using array.concat
Create a copy manually in a loop using push
Create a copy manually in a loop by index

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Create a copy using the spread operator	6546440.0 Ops/sec
Create a copy using array.concat	1745822.6 Ops/sec
Create a copy manually in a loop using push	147850.8 Ops/sec
Create a copy manually in a loop by index	161804.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark provided tests different methods for creating an immutable copy of an array while adding an item. The focus is on four approaches:

1. **Spread Operator** (`const newArray = [...array, { foo: 'bar' }];`)
2. **Array Concatenation** (`const newArray = array.concat({ foo: 'bar' });`)
3. **Manual Copy with Push** (`const newArray = []; const len = array.length; for (let i = 0; i < len; i++) { ... newArray.push(array[i]); } newArray.push({ foo: 'bar' });`)
4. **Manual Copy by Index** (`const len = array.length; const newArray = new Array(len + 1); for (let i = 0; i < len; i++) { ... newArray[i] = array[i]; } newArray[len] = { foo: 'bar' };`)

### Comparison of Approaches

#### 1. Spread Operator
- **Pros**: 
  - Concise and easy to read.
  - Excellent performance in most modern JavaScript engines due to optimization.
- **Cons**:
  - Slightly less familiar to developers not accustomed to ES6 features (though widely adopted now).

#### 2. Array Concatenation
- **Pros**:
  - Easy to understand and implement.
  - Also widely supported and used in legacy codebases.
- **Cons**:
  - Generally slower than the spread operator due to internal array handling in JavaScript engines, particularly with larger arrays.

#### 3. Manual Copy with Push
- **Pros**:
  - Gives fine-grained control over how items are copied.
  - Can be useful for deep copies or transformations during the copy.
- **Cons**:
  - Verbose and more complicated than necessary for simple copying operations.
  - Performance can be lower compared to built-in methods due to repeated function calls for `push`.

#### 4. Manual Copy by Index
- **Pros**: 
  - Offers potentially better performance than the push method as it avoids function overhead.
  - Efficient when the array size is known.
- **Cons**:
  - More code to maintain and less readable.
  - It doesn't leverage the built-in capabilities of JavaScript which are generally optimized.

### Other Considerations
When choosing an approach, developers should consider:
- **Readability vs. Performance**: While performance is crucial in some contexts, readable code is often more maintainable.
- **Array Size**: For smaller arrays, the performance differences are less significant, but for very large arrays or in performance-critical applications, the choice can have a meaningful impact.

### Alternatives
Some alternatives not tested in this benchmark could include:
- **Using a library**: Libraries such as Lodash provide methods (`_.concat()` etc.) to facilitate array operations. These can enable consistent behavior across environments but may introduce overhead.
- **Immutable.js**: For scenarios that require frequent state manipulations while ensuring immutability, libraries like Immutable.js provide optimized data structures that can dramatically enhance performance for certain applications.
- **Native typed arrays**: Utilizing typed arrays for numerical data can offer performance benefits for specific use cases.

### Conclusion
The benchmark highlights the trade-offs between modern JavaScript features like the spread operator and traditional methods like concatenation or manual copying. Developers should choose the approach that best fits their specific case, balancing between performance needs, code clarity, and future maintainability.

Related benchmarks:

Array spread vs concat vs others for adding an item and getting an immutable copy (version: 1)

Comparing performance of: Create a copy using the spread operator vs Create a copy using array.concat vs Create a copy manually in a loop using push vs Create a copy manually in a loop by index

Created: one month ago by: Registered User

Jump to the latest result

Create a copy using the spread operator

Create a copy using array.concat

Create a copy manually in a loop using push

Create a copy manually in a loop by index

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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