Benchmark: FSM - Array spread vs Array push

Script Preparation code:

var languages = [
        { key: '1', label: 'One' },
        { key: '2', label: 'Two' },
        { key: '3', label: 'Three' },
        { key: '4', label: 'Four' },
        { key: '5', label: 'Five' },
        { key: '6', label: 'Six' },
    ];

Tests:

Spread
languages.reduce((acc, language) => { return [ ...acc, { name: language.key, value: language.key, label: language.label, }, ]; }, []);
Push
languages.reduce((acc, language) => { acc.push({ name: language.key, value: language.key, label: language.label, }); return acc; }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread
Push

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**

The provided benchmark compares two approaches for creating an array of objects in JavaScript: using the spread operator (`...`) and using the `push()` method.

**Script Preparation Code**

The script preparation code defines an array of objects, `languages`, which will be used to create the test cases. The array contains six objects with keys `key`, `label`, and some other properties.

**Benchmark Definition**

The benchmark definition is a JavaScript function that takes an initial value (`acc`) and iterates over the `languages` array. For each language, it creates a new object with the required properties and adds it to either the spread operator result or the `push()` method result using the provided `acc` value.

**Individual Test Cases**

There are two test cases:

1. **Spread**: This test case uses the spread operator (`...`) to create an array of objects. It iterates over the `languages` array, creates a new object for each language, and adds it to the result using the spread operator.
2. **Push**: This test case uses the `push()` method to add elements to an array. It iterates over the `languages` array, creates a new object for each language, and pushes it onto the `acc` array.

**Options Compared**

The two approaches being compared are:

1. Spread operator (`...`)
2. `push()` method

**Pros and Cons of Each Approach**

* **Spread Operator (``):**
	+ Pros:
		- Can create an array of objects in a more concise way.
		- Can be faster for large arrays since it avoids the overhead of function calls.
	+ Cons:
		- Can lead to unexpected behavior if not used carefully, especially when dealing with complex data structures.
		- May not work as expected in older browsers or versions of JavaScript.
* `push()` Method:
	+ Pros:
		- More explicit and readable way to add elements to an array.
		- Works consistently across all browsers and versions of JavaScript.
	+ Cons:
		- Can be slower than the spread operator for large arrays due to the overhead of function calls.

**Library and Purpose**

There is no library explicitly mentioned in the benchmark definition. However, it's worth noting that some JavaScript libraries (e.g., Lodash) provide utilities like `spread()` or `concat()` that can help with creating arrays of objects.

**Special JS Features or Syntax**

The spread operator (`...`) was introduced in ECMAScript 2015 (ES6) and provides a concise way to create arrays from existing arrays or other iterable sources. The `push()` method has been available since ECMAScript 1.0 (1997) but is still widely used due to its explicit nature.

**Other Alternatives**

If you're looking for alternative approaches to creating an array of objects, consider the following:

* Using `Array.prototype.concat()`: This method concatenates one or more arrays into a new array.
* Using `Array.prototype.forEach()`: This method executes a callback function once for each element in an array and returns undefined.
* Using `Array.prototype.map()`: This method creates a new array with the results of applying a provided function to each element in an array.

Related benchmarks:

FSM - Array spread vs Array push (version: 0)

Comparing performance of: Spread vs Push

Created: 4 years ago by: Guest

Jump to the latest result

Spread

Push

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