Benchmark: map-push vs concat vs spread

Script Preparation code:

var result = ['1', '2', '3', '4', '5'];
var response = ['6', '7', '8'];

Tests:

map-push
response.map((num) => result.push(num));
concat
var final = result.concat(response);
spread
var final = [...result, ...response]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map-push
concat
spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Linux; Android 12; SAMSUNG SM-G781B) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/17.0 Chrome/96.0.4664.104 Mobile Safari/537.36

Browser/OS: Chrome Mobile 96 on Android

View result in a separate tab

Test name	Executions per second
map-push	1062549.5 Ops/sec
concat	29.0 Ops/sec
spread	7.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, compared, and considered.

**Benchmark Overview**

The benchmark compares the performance of three approaches to concatenate arrays:

1. `map-push`
2. `concat`
3. `spread`

These approaches are used to create a new array by combining two existing arrays: `result` and `response`.

**Options Compared**

* `map-push`: Uses the `map()` method on `result` and pushes elements from `response` into the resulting array.
* `concat`: Uses the `concat()` method on `result` and concatenates `response` to it.
* `spread`: Uses the spread operator (`...`) to create a new array by spreading both `result` and `response`.

**Pros and Cons of Each Approach**

1. **map-push**:
	* Pros: Can be efficient for large arrays, as elements are pushed one by one, reducing memory allocation overhead.
	* Cons: May have higher overhead due to the need to iterate over the entire `result` array using `map()`.
2. **concat**:
	* Pros: Easy to understand and implement, as it simply concatenates the two arrays.
	* Cons: Can be slow for large arrays, as a new array is created, and elements are copied one by one.
3. **spread**:
	* Pros: Fast and memory-efficient, as only a single operation is required to create a new array.
	* Cons: May not be supported in older browsers or environments.

**Library Usage**

There is no explicit library usage mentioned in the benchmark definition or individual test cases. However, it's worth noting that `map()` and `concat()` are built-in methods of JavaScript arrays, while the spread operator (`...`) was introduced in ECMAScript 2015 (ES6).

**Special JS Feature/Syntax**

There is no special JavaScript feature or syntax used in this benchmark.

**Other Considerations**

* **Cache locality**: The order of elements in `result` and `response` can affect cache locality, which may impact performance.
* **Array size**: The size of the arrays being concatenated affects performance. Larger arrays tend to be slower due to increased memory allocation and copying overhead.

**Alternative Approaches**

Other approaches that could be used for concatenating arrays include:

1. Using a loop with array indexing (e.g., `for (var i = 0; i < result.length; i++) { result[i] += response[i]; }`).
2. Utilizing Web Assembly or SIMD instructions, which can provide significant performance benefits for large-scale array operations.
3. Implementing a custom concatenation algorithm using low-level memory management techniques.

Keep in mind that these alternative approaches may not be supported by all browsers or environments and might have different trade-offs in terms of complexity, maintainability, and performance.

Related benchmarks:

map-push vs concat vs spread (version: 0)

Comparing performance of: map-push vs concat vs spread

Created: 4 years ago by: Guest

Jump to the latest result

map-push

concat

spread

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):