Benchmark: Object.assign vs spread vs Immutable.js operator for settting values

HTML Preparation code:

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  crossorigin="anonymous"></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.js"
  crossorigin="anonymous"></script>

Script Preparation code:

var params = { b:"hello", c: true, d:7 };
var immutable_params = Immutable.Record(params)()

Tests:

Object.assign
var other = Object.assign({ b:"world", c: false, d:2 }, params);
spread operator
var other = { b:"world", c: false, d:2, ...params };
jQuery extend
var other = $.extend({ b:"world", c: false, d:2 }, params);
Immutable merge
var other = immutable_params.merge({ b:"world", c: false, d:2 });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
spread operator
jQuery extend
Immutable merge

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Linux

View result in a separate tab

Test name	Executions per second
Object.assign	10986085.0 Ops/sec
spread operator	20320252.0 Ops/sec
jQuery extend	8984110.0 Ops/sec
Immutable merge	3680792.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark, MeasureThat.net, is designed to compare the performance of different approaches for setting values in JavaScript objects.

**Approaches Compared:**

1. **Object.assign()**: A built-in method for assigning properties from one or more source objects to a target object.
2. **Spread Operator (`...`)**: A syntax feature introduced in ECMAScript 2018 (ES2018) that allows spreading the properties of an object onto another object.
3. **jQuery `.extend()`**: A method provided by jQuery library for merging two or more objects into one.
4. **Immutable.js `merge()`**: A method from the Immutable.js library for merging two immutable records.

**Pros and Cons:**

1. **Object.assign()**:
	* Pros: Widely supported, simple to use, and efficient in most cases.
	* Cons: Can lead to shallow copying issues if not used carefully.
2. **Spread Operator (`...`)**:
	* Pros: Concise, efficient, and easy to understand. It also preserves the original object's properties when used with `Object.assign()` as a target.
	* Cons: Requires ECMAScript 2018 (ES2018) support or higher. Older browsers may not execute this syntax.
3. **jQuery `.extend()`**:
	* Pros: Mature and widely supported by jQuery, which is a popular JavaScript library. This method is also efficient in most cases.
	* Cons: Requires the inclusion of jQuery library. This adds extra size to your project, especially for smaller applications.
4. **Immutable.js `merge()`**:
	* Pros: Efficient, immutable (by design), and supports deep merging.
	* Cons: Requires Immutable.js library support, which may add extra size and complexity.

**Library Used:**

1. **jQuery**: A popular JavaScript library that provides a lot of functionality for DOM manipulation, event handling, and other tasks.
2. **Immutable.js**: A library designed to provide immutable data structures and algorithms. It's useful when dealing with complex state updates or computations.

**Special JS Feature/Syntax:**

1. **Spread Operator (`...`)**: Introduced in ECMAScript 2018 (ES2018) as a way to spread properties from one object onto another.
2. **jQuery `.extend()`**: A jQuery method for merging two or more objects into one.

**Other Alternatives:**

1. **Lodash's `_.assign()`**: Another popular utility library that provides an efficient and concise way to merge objects.
2. **ES6 Object Merging Methods (`Object.reduced()`, `Object.assignAll()`, etc.)**: These methods can also be used for merging objects, but they may have slightly different behaviors than the approaches compared in this benchmark.

**Benchmark Conclusion:**

The benchmark likely compares the performance of these four approaches (Object.assign(), Spread Operator, jQuery extend, and Immutable merge) to determine which one is most efficient. The results are provided in the "Latest benchmark result" section, but their actual values are not displayed here due to formatting limitations.

Keep in mind that the best approach will depend on your specific use case, as some of these methods may be more suitable for certain tasks or libraries than others.

Related benchmarks:

Object.assign vs spread vs Immutable.js operator for settting values (version: 0)

Comparing performance of: Object.assign vs spread operator vs jQuery extend vs Immutable merge

Created: 6 years ago by: Guest

Jump to the latest result

Object.assign

spread operator

jQuery extend

Immutable merge

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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