var objects = new Array(100000);
objects.fill({key: 'derp'});
objects.map((obj) => {
obj = Object.assign({}, obj);
obj.group = 'grouping';
return obj;
})
objects.map((obj) => {
obj.group = 'grouping';
return obj;
})
for (let i = 0; i < objects.length; i++) {
objects[i].group = 'grouping';
}
for (const obj of objects) {
obj.group = 'grouping';
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Map with clone | |
Map | |
Vanilla For | |
For Of |
Test name | Executions per second |
---|---|
Map with clone | 27.7 Ops/sec |
Map | 119.0 Ops/sec |
Vanilla For | 57.9 Ops/sec |
For Of | 2836.1 Ops/sec |
Let's break down the provided benchmarking test cases.
Benchmark Definition JSON
The JSON defines three benchmark tests:
"Map vs Vanilla For vs For Of 1000": This is the main benchmark definition, which compares the performance of three different approaches:
objects.map((obj) => {\r\n obj = Object.assign({}, obj);\r\n obj.group = 'grouping';\r\n return obj;\r\n})
for (let i = 0; i < objects.length; i++) {\r\n objects[i].group = 'grouping';\r\n}
for (const obj of objects) {\r\n obj.group = 'grouping';\r\n}
Individual test cases: The individual test cases are defined by the following JSON:
[ { "Benchmark Definition": "objects.map((obj) => {\r\n obj = Object.assign({}, obj);\r\n obj.group = 'grouping';\r\n return obj;\r\n})", "Test Name": "Map with clone" }, { "Benchmark Definition": "objects.map((obj) => {\r\n obj.group = 'grouping';\r\n return obj;\r\n})", "Test Name": "Map" }, { "Benchmark Definition": "for (let i = 0; i < objects.length; i++) {\r\n objects[i].group = 'grouping';\r\n}", "Test Name": "Vanilla For" }, { "Benchmark Definition": "for (const obj of objects) {\r\n obj.group = 'grouping';\r\n}", "Test Name": "For Of" } ]
Each individual test case is a modified version of the main benchmark definition, which allows for comparing different approaches to achieve the same result.
**Options Compared**
The three options compared in this benchmark are:
1. **`objects.map((obj) => {\r\n obj = Object.assign({}, obj);\r\n obj.group = 'grouping';\r\n return obj;\r\n})`**: This option uses the `Array.prototype.map()` method to create a new array with modified objects.
2. **`for (let i = 0; i < objects.length; i++) {\r\n objects[i].group = 'grouping';\r\n}`**: This option uses a traditional `for` loop to iterate over the array and modify each object.
3. **`for (const obj of objects) {\r\n obj.group = 'grouping';\r\n}`**: This option uses the `For...of` loop to iterate over the array and modify each object.
**Pros and Cons**
Here are some pros and cons of each approach:
1. **`objects.map((obj) => {\r\n obj = Object.assign({}, obj);\r\n obj.group = 'grouping';\r\n return obj;\r\n})`**: Pros:
* Efficient use of `Array.prototype.map()` method.
* Modifies objects in place, reducing memory allocation.
Cons:
* May incur additional overhead due to the clone operation (`Object.assign()`).
2. **`for (let i = 0; i < objects.length; i++) {\r\n objects[i].group = 'grouping';\r\n}`**: Pros:
* Simple and straightforward approach.
Cons:
* May incur additional overhead due to the loop iteration.
* Modifies original array, potentially affecting other parts of code.
3. **`for (const obj of objects) {\r\n obj.group = 'grouping';\r\n}`**: Pros:
* Modern and concise syntax using `For...of`.
Cons:
* May incur additional overhead due to the loop iteration.
**Library: Object.assign()**
The `Object.assign()` method is used in the first option to create a new object with modified properties. This method is part of the ECMAScript standard, which means it's supported by most modern browsers and Node.js environments.
**Special JS Feature/ Syntax: For Of Loop**
The third option uses the modern `For...of` loop syntax, which is introduced in ECMAScript 2015 (ES6). The `For...of` loop allows iterating over arrays without indexing, making it a concise and expressive way to iterate over collections.
Overall, this benchmark provides a clear comparison of three different approaches for modifying an array of objects. By understanding the pros and cons of each option, developers can make informed decisions about which approach to use in their own code.