Benchmark: Spread operator cost

Script Preparation code:

var book = { title: 'Jason is coming!', year: '1998' }

Tests:

assign by spread
let book2 = { ...book }
assign manually
let book2 = { title: book.title, year: book.year }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
assign by spread
assign manually

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
assign by spread	129174888.0 Ops/sec
assign manually	253035776.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its results.

The test case measures the performance difference between using the spread operator (`...`) to assign an object and manually assigning individual properties of the original object.

**Spread Operator Approach**

In JavaScript, the spread operator was introduced in ECMAScript 2015 (ES6). It allows you to create a new object by copying all own enumerable properties from an existing object. In this benchmark, `let book2 = { ...book }` creates a shallow copy of the `book` object.

Pros:

* Easier to read and write, as it clearly conveys the intent of creating a new object.
* Less prone to typos or errors compared to manual property assignment.

Cons:

* May not be suitable for objects with nested properties, as it only creates a shallow copy. For deeper nesting, you would need to use `Object.assign()` or `Object.create()`.
* Can lead to unnecessary creation of temporary objects in some cases.

**Manual Property Assignment Approach**

In contrast, manually assigning individual properties using object literal syntax (`let book2 = { title: book.title, year: book.year }`) can be a more traditional way of creating a new object.

Pros:

* Suitable for objects with nested properties.
* More control over the resulting object structure.

Cons:

* Can be less readable and maintainable, especially for complex objects or large codebases.

**Library Considerations**

There is no explicit library used in this benchmark. However, if you were to implement a custom spread operator implementation (e.g., using `Object.assign()`), you would need to consider the trade-offs mentioned above.

**Special JavaScript Features and Syntax**

There are no special JavaScript features or syntax used in this benchmark beyond what's already mentioned.

**Alternatives**

Other alternatives for creating new objects include:

1. **`Object.assign()`**: A more general-purpose method for copying properties from one object to another.
2. **`Object.create()`**: Creates a new object with the specified prototype chain, which can be useful for complex object structures.
3. **Constructors and prototypes**: Using constructors (e.g., `class Book { ... }`) or setting the `prototype` property of an object can also create new objects.

Each approach has its own trade-offs in terms of performance, readability, and maintainability. The spread operator is a convenient and efficient way to create shallow copies, but may not be suitable for all cases.

In this specific benchmark, the results show that using the spread operator (`assign by spread`) leads to better performance (higher executions per second) compared to manual property assignment (`assign manually`). However, the actual performance difference may vary depending on the specific use case and JavaScript engine being used.

Related benchmarks:

Spread operator cost (version: 0)

Comparing performance of: assign by spread vs assign manually

Created: 4 years ago by: Guest

Jump to the latest result

assign by spread

assign manually

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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