Benchmark: Array concat vs spread vs push spread, loop, apply vs lodash.concat

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js'></script>

Script Preparation code:

var subarrs = [
 [ "hello", true, 7 ],
 [ "yes", "no", "maybe", false, 27 ],
 [ 16, "I", "wonder", "what", "will", "be", "fastest"]
];

Tests:

Array.prototype.concat
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other = other.concat(subarrs[i]); } return other;
spread operator
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other = [ ...other, ...subarrs[i] ] } return other;
Push Spread
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other.push(...subarrs[i]); } return other;
Push Apply
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other.push.apply(other, subarrs[i]); } return other;
Push Loop
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ for (var jarr = subarrs[i], jen = jarr.length, j = 0; j < jen; j++){ other.push(jarr[j]); } } return other;
lodash concat
var other = [ 1, 2, 3 ]; other = _.concat(other, subarrs); return other;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push Spread
Push Apply
Push Loop
lodash concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Yandex Browser 24 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4952619.5 Ops/sec
spread operator	12043091.0 Ops/sec
Push Spread	17719236.0 Ops/sec
Push Apply	17606722.0 Ops/sec
Push Loop	27888272.0 Ops/sec
lodash concat	6444775.5 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark on MeasureThat.net compares different methods for concatenating arrays in JavaScript. The focus is on the performance of six distinct approaches, particularly contrasting traditional JavaScript methods with newer syntax introduced in ES6.

### Approaches Compared

1. **Array.prototype.concat**
   - **Implementation:** 
     ```javascript
     var other = [ 1, 2, 3 ];
     for (var len = subarrs.length, i = 0; i < len; i++) {
         other = other.concat(subarrs[i]);
     }
     return other;
     ```
   - **Pros:** 
     - Simple and straightforward to use.
     - Clearly expresses the intent to concatenate arrays.
   - **Cons:**
     - Creates a new array on each iteration, which can lead to increased memory usage and overhead, especially for larger datasets.

2. **Spread Operator**
   - **Implementation:**
     ```javascript
     var other = [ 1, 2, 3 ];
     for (var len = subarrs.length, i = 0; i < len; i++) {
         other = [ ...other, ...subarrs[i] ];
     }
     return other;
     ```
   - **Pros:**
     - Concise and expressive syntax; effectively flattens the arrays.
   - **Cons:**
     - Like `concat()`, it creates a new array on each iteration, leading to potential performance issues with larger datasets.

3. **Push with Spread**
   - **Implementation:**
     ```javascript
     var other = [ 1, 2, 3 ];
     for (var len = subarrs.length, i = 0; i < len; i++) {
         other.push(...subarrs[i]);
     }
     return other;
     ```
   - **Pros:**
     - Modifies the existing array in place, thus reducing overhead.
   - **Cons:**
     - The spread syntax can introduce additional overhead when processing large arrays, though it generally performs better than `concat` and the spread operator in a loop.

4. **Push with Apply**
   - **Implementation:**
     ```javascript
     var other = [ 1, 2, 3 ];
     for (var len = subarrs.length, i = 0; i < len; i++) {
         other.push.apply(other, subarrs[i]);
     }
     return other;
     ```
   - **Pros:**
     - Efficient since it modifies `other` in place.
   - **Cons:**
     - There may be stack overflow issues with very large arrays due to argument length limits in `apply()`.

5. **Push Loop**
   - **Implementation:**
     ```javascript
     var other = [ 1, 2, 3 ];
     for (var len = subarrs.length, i = 0; i < len; i++) {
         for (var jarr = subarrs[i], jen = jarr.length, j = 0; j < jen; j++) {
             other.push(jarr[j]);
         }
     }
     return other;
     ```
   - **Pros:**
     - Uses a simple nested loop to add elements, which can be quite efficient.
   - **Cons:**
     - Slightly more verbose and might appear less clear compared to the other methods.

6. **Lodash `concat`**
   - **Implementation:**
     ```javascript
     var other = [ 1, 2, 3 ];
     other = _.concat(other, subarrs);
     return other;
     ```
   - **Pros:**
     - Utilizes the utility library Lodash, which is well-optimized for performance and usability.
   - **Cons:**
     - Requires an external library, which may not be ideal for all projects, especially if minimizing dependencies is a concern.

### Benchmark Results
The test results showed the following performance (in executions per second):
- **Push Loop**: 27,888,272
- **Push Spread**: 17,719,236
- **Push Apply**: 17,606,722
- **Spread Operator**: 12,043,091
- **Lodash `concat`**: 6,444,775
- **Array.prototype.concat**: 4,952,620

### Other Considerations
- **Memory Efficiency:** In practice, the choice of method might depend on the specific use case, such as the size of the arrays and required memory efficiency. In scenarios with very large arrays, it is vital to monitor performance impacts and avoid methods that create many intermediate arrays.
  
- **Readability vs. Performance:** While methods like `concat` or the spread operator are more readable and expressive, their performance could be detrimental in critical applications with high-performance requirements.

### Alternatives
Other methods of combining arrays in JavaScript could include:
- **Using generators or iterators**: These can provide a way to handle large datasets more efficiently and incrementally.
- **Typed arrays**: Useful for performance optimization in numerical computations.
- **Functional methods like `reduce`**: Can provide a clean, functional way of concatenating arrays but may not always yield the best performance.

In conclusion, when deciding on an approach for array concatenation in JavaScript, factors like performance, memory consumption, readability, and the project’s dependency policies should guide the selection of the best method.

Related benchmarks:

Array concat vs spread vs push spread, loop, apply vs lodash.concat (version: 2)

Compare the new ES6 spread operator with the traditional concat() method and push

Comparing performance of: Array.prototype.concat vs spread operator vs Push Spread vs Push Apply vs Push Loop vs lodash concat

Created: 4 months ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

Push Spread

Push Apply

Push Loop

lodash concat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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