Benchmark: Copy fields and values from object to map: Map(Object.entries) vs cycle with copy1

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js'></script>

Script Preparation code:

var testObject = {
  a: "1",
  b: "2",
  c: "3",
  d: "4",
  e: "5",
  f: "6",
  g: "7",
  h: "8",
  i: "9",
  j: "10"
};

Tests:

Use Map and Object entries
var result = new Map(Object.entries(testObject));
Use cycle with copy of object
var result = new Map(); $.each(JSON.parse(JSON.stringify(testObject)), function (key, value) { result.set(key, value); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Use Map and Object entries
Use cycle with copy of object

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 8.0.0; moto g(6) play) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.85 Mobile Safari/537.36

Browser/OS: Chrome Mobile 94 on Android 8.0.0

View result in a separate tab

Test name	Executions per second
Use Map and Object entries	58098.0 Ops/sec
Use cycle with copy of object	28415.7 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmark test case, specifically comparing two approaches to copying fields and values from an object to a map: using the `Map` constructor with `Object.entries` versus using a cycle (a loop) to iterate over the object's properties.

**Approach 1: Using `Map` and `Object.entries`**

In this approach, a new `Map` instance is created, and its `entries()` method is called on the `testObject`. The resulting iterable is then used as the source for the map constructor.

```javascript
var result = new Map(Object.entries(testObject));
```

**Pros:**

1. **Concise**: This approach is concise and easy to read.
2. **Efficient**: Creating a `Map` instance is generally faster than using a cycle to iterate over properties.

**Cons:**

1. **Overhead**: Creating a new `Map` instance may incur some overhead, especially for large objects.
2. **Limited support**: Some older browsers may not support the `Map` constructor or `Object.entries()` method.

**Approach 2: Using a cycle ( $.each ) with copy of object**

In this approach, an array is created by cloning the `testObject` using `JSON.parse(JSON.stringify(testObject))`. Then, a cycle (using `$` .each) is used to iterate over the cloned array and set each property on a new map instance.

```javascript
var result = new Map();
$.each(JSON.parse(JSON.stringify(testObject)), function(key, value) {
  result.set(key, value);
});
```

**Pros:**

1. **Flexibility**: This approach allows for more control over the iteration process.
2. **Compatibility**: It works in older browsers that may not support `Map` constructor or `Object.entries()` method.

**Cons:**

1. **Verbose**: This approach is more verbose and harder to read compared to the first one.
2. **Less efficient**: Using a cycle can be slower than creating a `Map` instance directly.

**Library Usage**

The test case uses jQuery (`.each`) as a utility function to iterate over the array, but it does not use any libraries for map creation or object copying.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax used in this benchmark. It only employs standard ES6 and older features that are widely supported.

**Other Alternatives**

If you want to explore other approaches, here are a few alternatives:

* Using `reduce()` method: `var result = new Map(obj => obj).reduce((m, [key, value]) => m.set(key, value), new Map());`
* Using `forEach()` method: `var result = new Map(obj => obj.forEach(value => result.set(key, value)));`
* Using a library like Lodash (e.g., `_.mapKeys()`, `_.reduce`) for more concise and readable code.

Keep in mind that the performance differences between these approaches may vary depending on the specific use case and browser version.

Related benchmarks:

Copy fields and values from object to map: Map(Object.entries) vs cycle with copy1 (version: 1)

Test which solution is better for copy fields and values to map.

Comparing performance of: Use Map and Object entries vs Use cycle with copy of object

Created: 4 years ago by: Registered User

Jump to the latest result

Use Map and Object entries

Use cycle with copy of object

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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