Benchmark: reduce push vs spred vs concat

Tests:

spread
const a = ['1', '2', '3', '4', '5', '6']; const b = a.reduce((res, item) => [...res, item], []);
push
const a = ['1', '2', '3', '4', '5', '6']; const b = a.reduce((res, item) => { res.push(item); return res; }, []);
concat
const a = ['1', '2', '3', '4', '5', '6']; const b = a.reduce((res, item) => res.concat(item), []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
push
concat

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks to compare the performance of different approaches. In this case, we have a benchmark comparing three ways to push elements into an array: `reduce` with spread syntax, `reduce` with `push`, and `concat`.

**Benchmark Definition**

The benchmark definition is represented by two JSON objects:

1. **Benchmark**: `{ "Name": "reduce push vs spred vs concat", ... }`
	* This object defines the overall benchmark, including its name and a brief description.
	* It also includes script preparation code (empty in this case) and HTML preparation code (also empty).
2. **Individual Test Cases**:
	* There are three test cases, each representing one of the three approaches being compared.

**Test Case 1: "spread"**

```javascript
const a = ['1', '2', '3', '4', '5', '6'];
const b = a.reduce((res, item) => [...res, item], []);
```

* This test case uses the `reduce` method with an arrow function that spreads the current result (`res`) into a new array using the spread operator (`[...res, item]`).
* The initial value of the accumulator is an empty array (`[]`).

**Test Case 2: "push"**

```javascript
const a = ['1', '2', '3', '4', '5', '6'];
const b = a.reduce((res, item) => {
  res.push(item);
  return res;
}, []);
```

* This test case uses the `reduce` method with an arrow function that pushes each item onto the current result (`res`) using the `push` method.
* The initial value of the accumulator is still an empty array (`[]`).

**Test Case 3: "concat"**

```javascript
const a = ['1', '2', '3', '4', '5', '6'];
const b = a.reduce((res, item) => res.concat(item), []);
```

* This test case uses the `reduce` method with an arrow function that concatenates each item onto the current result (`res`) using the `concat` method.
* The initial value of the accumulator is still an empty array (`[]`).

**Library: Array.prototype.reduce**

The `reduce` method is a built-in method on the `Array` prototype in JavaScript. Its purpose is to apply a reduction function to each element in the array, accumulating a result.

**Special JS Features/Syntax**

* None mentioned in this benchmark.

**Options Compared**

The three test cases compare the performance of:

1. **Spread syntax** (`[...res, item]`)
2. **`push` method** (`res.push(item)`)
3. **`concat` method** (`res.concat(item)`)

Each approach has its pros and cons:

* **Spread syntax**: Pros: concise, efficient; Cons: may be slower due to the overhead of creating a new array.
* `push` method: Pros: simple, widely supported; Cons: may not be as concise or efficient as spread syntax.
* `concat` method: Pros: simple, widely supported; Cons: creates a new array and may be slower than spread syntax.

**Other Alternatives**

If you want to explore other approaches, consider:

1. Using `Array.prototype.forEach`: Instead of reducing the array, you can use `forEach` to iterate over each element.
2. Using `Array.prototype.map`: You can use `map` to create a new array with transformed elements, rather than modifying the original array.

Keep in mind that performance differences between these approaches may vary depending on the specific use case and JavaScript engine.

Related benchmarks:

reduce push vs spred vs concat (version: 0)

Comparing performance of: spread vs push vs concat

Created: 5 years ago by: Guest

Jump to the latest result

spread

push

concat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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