Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Spread vs concat vs forEach array v1001
(version: 0)
Comparing performance of:
concat vs forEach vs spread
Created:
3 years ago
by:
Guest
Jump to the latest result
Tests:
concat
const arr1 = Array.from({ length: 5000}).map((_, i) => i); const arr2 = Array.from({ length: 5000}).map((_, i) => i); const arr3 = Array.from({ length: 5000}).map((_, i) => i); const finallArr1 = arr1.concat(arr2).concat(arr3);
forEach
const arr1 = Array.from({ length: 5000}).map((_, i) => i); const arr2 = Array.from({ length: 5000}).map((_, i) => i); const arr3 = Array.from({ length: 5000}).map((_, i) => i); const finalArr2 = []; arr1.forEach((e) => finalArr2.push(e)); arr2.forEach((e) => finalArr2.push(e)); arr3.forEach((e) => finalArr2.push(e));
spread
const arr1 = Array.from({ length: 5000}).map((_, i) => i); const arr2 = Array.from({ length: 5000}).map((_, i) => i); const arr3 = Array.from({ length: 5000}).map((_, i) => i); const finalArr3 = [...arr1, ...arr2, ...arr3];
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
concat
forEach
spread
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):
Let's break down the provided benchmark and explain what's being tested. **Benchmark Purpose** The benchmark is designed to compare the performance of three different methods for concatenating arrays: 1. `concat()` 2. Using the spread operator (`...`) 3. Using `forEach()` with a callback function **Options Compared** * `concat()`: uses the `Array.prototype.concat()` method to concatenate two or more arrays. * Spread Operator (`...`): uses the spread operator to merge one or more arrays into a new array. * `forEach()` with a callback function: uses the `Array.prototype.forEach()` method to iterate over an array and perform a specified action on each element. **Pros and Cons of Each Approach** 1. **concat()**: * Pros: widely supported, easy to read and write. * Cons: can be slower than spread operator for large arrays due to the creation of intermediate arrays. 2. **Spread Operator (`...`)**: * Pros: faster, more concise, and efficient for merging arrays. * Cons: may not be supported in older browsers or versions of JavaScript. 3. **forEach() with a callback function**: * Pros: can be useful when you need to perform multiple operations on each array element. * Cons: may not be as efficient as spread operator due to the overhead of iterating over the array. **Library Used** In this benchmark, no specific library is used beyond the standard JavaScript functions (e.g., `Array.prototype.concat()`, `Array.prototype.forEach()`). **Special JS Feature or Syntax** The benchmark uses a feature that was introduced in ECMAScript 2015 (ES6): the spread operator (`...`). This feature allows you to merge arrays using a concise syntax. **Other Considerations** * The benchmark creates an array of length 5000 and populates it with values from 0 to 4999 using `Array.from()`. * Each test case uses the same initial array creation code, which minimizes the impact of differences in JavaScript execution engines. * The benchmark is run on a single device (Macintosh with Firefox 120) for each test case. **Alternatives** Other alternatives for concatenating arrays could include: * Using `Array.prototype.push()` to append elements to an existing array: ```javascript const arr1 = [1, 2, 3]; arr1.push(4, 5, 6); ``` * Using a loop with `push()` or `unshift()` to concatenate arrays: ```javascript const arr1 = [1, 2, 3]; let finalArr = []; for (let i = 0; i < 5000; i++) { finalArr.push(i + 1); } ``` However, these alternatives are generally less efficient and more verbose than the methods used in this benchmark.
Related benchmarks:
Large Array concat vs spread operator vs push
Array concat vs spread operator vs push (forEach)
Array concat vs spread operator vs push larger list
Array.prototype.concat vs spread operator vs push with spread
Array concat vs spread operator vs push + spread 2023-08-21
Comments
Confirm delete:
Do you really want to delete benchmark?