Benchmark: JavaScript spread operator vs Object.assign performance - modify object - v2

Tests:

Using the spread operator

const firstObject = {
  attempts: 1,
  created_at: 1694778031091,
  expires_at: 1694778091091,
  source: {
    externalId: "831f76fc-5a9d-49bc-8d4b-114010cedb73",
    name: "Tengen Uzui",
    type: "phone",
  },
  type: "phone",
  value: "411273",
};
const finalObject = {
  ...firstObject,
  attempts: firstObject.attempts + 1,
};

​x
 
const firstObject = {  attempts: 1,  created_at: 1694778031091,  expires_at: 1694778091091,  source: {    externalId: "831f76fc-5a9d-49bc-8d4b-114010cedb73",    name: "Tengen Uzui",    type: "phone",  },  type: "phone",  value: "411273",};const finalObject = {  ...firstObject,  attempts: firstObject.attempts + 1,};​

Using Object.assign

const firstObject = {
  attempts: 1,
  created_at: 1694778031091,
  expires_at: 1694778091091,
  source: {
    externalId: "831f76fc-5a9d-49bc-8d4b-114010cedb73",
    name: "Tengen Uzui",
    type: "phone",
  },
  type: "phone",
  value: "411273",
};

const finalObject = Object.assign({
  attempts: firstObject.attempts + 1,
}, firstObject);

 
const firstObject = {  attempts: 1,  created_at: 1694778031091,  expires_at: 1694778091091,  source: {    externalId: "831f76fc-5a9d-49bc-8d4b-114010cedb73",    name: "Tengen Uzui",    type: "phone",  },  type: "phone",  value: "411273",};​const finalObject = Object.assign({  attempts: firstObject.attempts + 1,}, firstObject);​

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Using the spread operator
Using Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	55731712.0 Ops/sec
Using Object.assign	8506396.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 4 months ago):

Benchmark Explanation

The provided benchmark measures the performance of two approaches to modify an object in JavaScript:

Spread Operator (...): This method is used to create a new object by copying all own enumerable properties from one or more source objects into a new object.
Object.assign(): This method returns a shallow copy of source and assigns it to the object. It also copies all enumerable own properties from source to object.

Benchmark Definition

The benchmark definition in JSON format contains the following information:

The name of the benchmark, which is "JavaScript spread operator vs Object.assign performance - modify object - v2".
A brief description (although it's empty in this case).
Script preparation code and HTML preparation code are not provided.

Individual Test Cases

There are two test cases in the benchmark definition. Each test case contains:

Benchmark Definition: The actual JavaScript code that performs the modification using either the spread operator or Object.assign.
Test Name: A descriptive name for each test case, which indicates whether it uses the spread operator ("Using the spread operator").

Options Compared

The two options compared in this benchmark are:

Using the spread operator (...) to modify an object.
Using Object.assign() to modify an object.

Pros and Cons of Each Approach:

Spread Operator (...):
- Pros:
  - More concise and readable code.
  - Can be used with objects that contain nested objects.
- Cons:
  - May create new objects unnecessarily, which can lead to memory allocation overhead.
  - Not as efficient as Object.assign() for large datasets.
Object.assign():
- Pros:
  - More efficient than the spread operator for large datasets.
  - Can be used with arrays and other data structures that support shallow copying.
- Cons:
  - May result in less readable code due to the need for explicit assignment.

Library Usage

There is no library usage in this benchmark. However, it's worth noting that Object.assign() uses the V8 engine's built-in implementation of the method, which may provide better performance than a custom implementation.

Special JS Feature or Syntax

The spread operator (...) was introduced in ECMAScript 2015 (ES6) as a new way to create objects and arrays. It provides a more concise and readable way to copy properties from one object to another.

Overall, this benchmark measures the performance of two different approaches to modifying objects in JavaScript, highlighting the trade-offs between conciseness, readability, and efficiency.

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark measures the performance of two approaches to modify an object in JavaScript:

1. **Spread Operator (`...`)**: This method is used to create a new object by copying all own enumerable properties from one or more source objects into a new object.
2. **Object.assign()**: This method returns a shallow copy of `source` and assigns it to the `object`. It also copies all enumerable own properties from `source` to `object`.

**Benchmark Definition**

The benchmark definition in JSON format contains the following information:

* The name of the benchmark, which is "JavaScript spread operator vs Object.assign performance - modify object - v2".
* A brief description (although it's empty in this case).
* Script preparation code and HTML preparation code are not provided.

**Individual Test Cases**

There are two test cases in the benchmark definition. Each test case contains:

* **Benchmark Definition**: The actual JavaScript code that performs the modification using either the spread operator or Object.assign.
* **Test Name**: A descriptive name for each test case, which indicates whether it uses the spread operator (`"Using the spread operator"`).

**Options Compared**

The two options compared in this benchmark are:

1. Using the spread operator (`...`) to modify an object.
2. Using `Object.assign()` to modify an object.

**Pros and Cons of Each Approach:**

* **Spread Operator (`...`)**:
	+ Pros:
		- More concise and readable code.
		- Can be used with objects that contain nested objects.
	+ Cons:
		- May create new objects unnecessarily, which can lead to memory allocation overhead.
		- Not as efficient as `Object.assign()` for large datasets.
* **Object.assign()**:
	+ Pros:
		- More efficient than the spread operator for large datasets.
		- Can be used with arrays and other data structures that support shallow copying.
	+ Cons:
		- May result in less readable code due to the need for explicit assignment.

**Library Usage**

There is no library usage in this benchmark. However, it's worth noting that `Object.assign()` uses the V8 engine's built-in implementation of the method, which may provide better performance than a custom implementation.

**Special JS Feature or Syntax**

The spread operator (`...`) was introduced in ECMAScript 2015 (ES6) as a new way to create objects and arrays. It provides a more concise and readable way to copy properties from one object to another.

Overall, this benchmark measures the performance of two different approaches to modifying objects in JavaScript, highlighting the trade-offs between conciseness, readability, and efficiency.

Related benchmarks:

JavaScript spread operator vs Object.assign performance - modify object - v2 (version: 0)

Comparing performance of: Using the spread operator vs Using Object.assign

Created: one year ago by: Guest

Jump to the latest result