Benchmark: object assign vs object spread vs immutable-js vs immutability-helper on large data set 3

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/immutability-helper@2.7.0/index.min.js"></script>

AخA
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/immutability-helper@2.7.0/index.min.js"></script>

Tests:

object spread
const obj = {}; for(i=0;i<100000;i++){ obj[i] = 'some long string which will need to be copied'; } const obj2 = {key: 'This is final object'} const final = {obj2, ...obj};
x

const obj = {};
for(i=0;i<100000;i++){
obj[i] = 'some long string which will need to be copied';
}

const obj2 = {key: 'This is final object'}

const final = {obj2, ...obj};

object assign

const obj = {};
for(i=0;i<100000;i++){
  obj[i] = 'some long string which will need to be copied';
}

const obj2 = {key: 'This is final object'}

const final = Object.assign({}, obj2, obj)

const r = final.key

 
const obj = {};for(i=0;i<100000;i++){  obj[i] = 'some long string which will need to be copied';}​const obj2 = {key: 'This is final object'}​const final = Object.assign({}, obj2, obj)​const r = final.key

immutable-js

const obj = {};
for(i=0;i<100000;i++){
  obj[i] = 'some long string which will need to be copied';
}
const immObj = Immutable.Map();

const obj2 = {key: 'This is final object'}

const final = immObj.set(obj).set(obj2);

const r = final.get("key")

 
const obj = {};for(i=0;i<100000;i++){  obj[i] = 'some long string which will need to be copied';}const immObj = Immutable.Map();​const obj2 = {key: 'This is final object'}​const final = immObj.set(obj).set(obj2);​const r = final.get("key")

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
object spread
object assign
immutable-js

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36

Browser/OS: Chrome 70 on Windows 7

View result in a separate tab

Test name	Executions per second
object spread	29.3 Ops/sec
object assign	30.3 Ops/sec
immutable-js	337.4 Ops/sec

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

Overview of the Benchmark

The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net, which compares the performance of different approaches for creating a new object with data from an existing object.

Approaches Compared

There are three approaches compared:

Object Spread: Using the spread operator ({...obj}) to create a new object and copy data from obj.
Object Assign: Using Object.assign() to merge two objects.
Immutable-JS: Utilizing the Immutable library to create an immutable map and perform operations on it.

Pros and Cons of Each Approach

Object Spread:
- Pros: Simple, concise syntax; fast execution (due to using JavaScript's built-in spread operator).
- Cons: May not work as expected with large datasets or complex objects.
Object Assign:
- Pros: Well-established and widely supported; can handle complex object merges.
- Cons: Can be slower due to the overhead of creating a new object and merging properties.
Immutable-JS:
- Pros: Provides an immutable data structure, which can help with concurrency and debugging.
- Cons: Requires importing additional libraries (Immutable.js) and may have slower execution compared to simple spread or assign operations.

Library Descriptions

Immutable: A library for functional programming in JavaScript, providing a way to create immutable data structures, such as maps and sets. It's used in the "Immutable-JS" approach.
Immutability-Helper: A small utility library that provides additional functions for working with Immutable.js data structures.

Special JS Features/Syntax

None mentioned explicitly in the provided benchmark definitions, but it's worth noting that the spread operator ({...obj}) is a relatively recent feature (introduced in ES6) and may not be supported by older browsers or JavaScript engines.

Other Alternatives

If you're interested in exploring other approaches or alternatives, here are a few options:

Lodash: A popular utility library that provides many functions for working with objects, including _.merge() and _.assign().
Object.create(): Another way to create an object by specifying a prototype, which can be useful in certain scenarios.
Array.prototype.concat(): Can be used to concatenate arrays or objects, but may not work as expected for complex data structures.

Keep in mind that the choice of approach often depends on the specific requirements and constraints of your project.

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

**Approaches Compared**

There are three approaches compared:

1. **Object Spread**: Using the spread operator (`{...obj}`) to create a new object and copy data from `obj`.
2. **Object Assign**: Using `Object.assign()` to merge two objects.
3. **Immutable-JS**: Utilizing the Immutable library to create an immutable map and perform operations on it.

**Pros and Cons of Each Approach**

1. **Object Spread**:
	* Pros: Simple, concise syntax; fast execution (due to using JavaScript's built-in spread operator).
	* Cons: May not work as expected with large datasets or complex objects.
2. **Object Assign**:
	* Pros: Well-established and widely supported; can handle complex object merges.
	* Cons: Can be slower due to the overhead of creating a new object and merging properties.
3. **Immutable-JS**:
	* Pros: Provides an immutable data structure, which can help with concurrency and debugging.
	* Cons: Requires importing additional libraries (Immutable.js) and may have slower execution compared to simple spread or assign operations.

**Library Descriptions**

1. **Immutable**: A library for functional programming in JavaScript, providing a way to create immutable data structures, such as maps and sets. It's used in the "Immutable-JS" approach.
2. **Immutability-Helper**: A small utility library that provides additional functions for working with Immutable.js data structures.

**Special JS Features/Syntax**

None mentioned explicitly in the provided benchmark definitions, but it's worth noting that the spread operator (`{...obj}`) is a relatively recent feature (introduced in ES6) and may not be supported by older browsers or JavaScript engines.

**Other Alternatives**

If you're interested in exploring other approaches or alternatives, here are a few options:

1. **Lodash**: A popular utility library that provides many functions for working with objects, including `_.merge()` and `_.assign()`.
2. **Object.create()**: Another way to create an object by specifying a prototype, which can be useful in certain scenarios.
3. **Array.prototype.concat()**: Can be used to concatenate arrays or objects, but may not work as expected for complex data structures.

Keep in mind that the choice of approach often depends on the specific requirements and constraints of your project.

Related benchmarks:

object assign vs object spread vs immutable-js vs immutability-helper on large data set 3 (version: 0)

Comparing performance of: object spread vs object assign vs immutable-js

Created: 6 years ago by: Guest

Jump to the latest result

object spread