Benchmark: Object spread vs new Map vs Object assign with complex data

Script Preparation code:

var data = new Array(1000000).fill(undefined).map((_,i) => i)
var obj = data.reduce((obj, idx) => {obj['idx' + Date.now()] = {name: 'Name: ' + Date.now(), age: idx}; return obj}, {});
var map = new Map(Object.entries(obj));

Tests:

Object spread
var copy = {...obj}
new Map
var copy = new Map(map)
Object assign
var copy = Object.assign({}, obj)

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

new Map

90K/s

Object spread

17K/s

Object assign

17K/s

Fastest: new Map (5.3x faster)

View exact numbers

✓ new Map: 89,877 ops/sec
• Object spread: 17,376 ops/sec
• Object assign: 16,867 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object spread
new Map
Object assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.0

View result in a separate tab

new Map

720K/s

Object spread

231K/s

Object assign

202K/s

View exact numbers

Test name	Executions per second
✓ new Map	719,920 Ops/sec
Object spread	231,436 Ops/sec
Object assign	201,514 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data to understand what is being tested in this JavaScript microbenchmark.

**Benchmark Definition**

The benchmark definition is a JSON object that describes the test scenario:

* `Name`: The name of the benchmark, which is "Object spread vs new Map vs Object assign with complex data".
* `Description`: The description of the benchmark is null, meaning no additional context is provided.
* `Script Preparation Code`: This code snippet creates two large objects and a Map to be used in the test. The object is created by reducing an array of numbers and assigning each number as a property to the object with a timestamp as the key. The Map is created from the object's entries using `Object.entries`.
* `Html Preparation Code`: There is no HTML preparation code provided.

**Individual Test Cases**

The individual test cases are defined in an array:

* Each object in the array represents a single test case.
* For each test case, there is:
	+ `Benchmark Definition`: A string that describes how to create a copy of the original data structure (obj) using different methods. The three methods used are:
		1. Object spread (`var copy = {...obj}`).
		2. `new Map(map)` (creating a new Map from an existing one, where map is the object's entries).
		3. Object assign (`var copy = Object.assign({}, obj)`).
	+ `Test Name`: A string that identifies the test case.

**Library and Purpose**

The library used in this benchmark is `Map`. In JavaScript, a Map is a data structure that stores key-value pairs. It allows you to efficiently look up values by their keys and provides methods for iterating over its entries. The purpose of using `Map` here is likely to demonstrate its performance compared to other object manipulation techniques.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark that would require specific knowledge or expertise to understand. The code uses standard JavaScript syntax and features, such as arrays, objects, and the `Map` constructor.

**Pros and Cons of Each Approach**

Here's a brief summary of the pros and cons of each approach:

* **Object Spread (`var copy = {...obj}`)**:
	+ Pros: Simple and concise. Creates a shallow copy of the object.
	+ Cons: May not work correctly for objects with circular references or complex data structures.
* **`new Map(map)`**:
	+ Pros: Efficiently creates a new Map from an existing one. Preserves key-value pairs and their order.
	+ Cons: Requires creating a new Map, which can be overkill if the original object is already large.
* **Object Assign (`var copy = Object.assign({}, obj)`)**:
	+ Pros: Creates a deep copy of the object, including all its properties and nested objects.
	+ Cons: May have performance implications due to the creation of a new object.

**Alternatives**

Other alternatives for creating copies of objects or Maps include:

* Using `JSON.parse(JSON.stringify(obj))` (although this method is not recommended as it can lose information about circular references).
* Using `Array.prototype.map()` and `Object.fromEntries()` methods (for creating a new array from an object's entries).

Overall, the choice of approach depends on the specific requirements and constraints of the project. For most use cases, Object Assign will provide a good balance between simplicity and correctness, while `new Map` will offer better performance for larger datasets.

Object spread vs new Map vs Object assign with complex data (version: 0)

Comparing performance of: `Object spread vs new Map vs Object assign`

Created: 3 years ago by: Guest

Go to the latest result

Object spread

new Map

Object assign

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Object spread vs new Map vs Object assign with complex data (version: 0)

Comparing performance of: Object spread vs new Map vs Object assign

Created: 3 years ago by: Guest

Go to the latest result

Object spread

new Map

Object assign

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Comparing performance of: `Object spread vs new Map vs Object assign`