Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
reduce creation2
(version: 0)
Benchmark.js
Comparing performance of:
spread insert vs assign insert vs map vs mutation
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var data = Array.from({ length: 10000 }).map((_, idx) => idx)
Tests:
spread insert
data.reduce((acc, val) => ({ ...acc, [val]: val }), {})
assign insert
data.reduce((acc, val) => Object.assign(acc, {[val]: val}))
map
Object.fromEntries(data.reduce((acc, val) => acc.set(val, val), new Map()))
mutation
data.reduce((acc, val) => acc[val] = val, {})
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
spread insert
assign insert
map
mutation
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Browser/OS:
Chrome 121 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=507788" width="100%" height="500px"></iframe>
map
1K/s
mutation
753/s
assign insert
263/s
spread insert
141/s
View exact numbers
Test name
Executions per second
✓
map
1,397 Ops/sec
mutation
753 Ops/sec
assign insert
263 Ops/sec
spread insert
141 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Overview** MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON data represents the benchmark definition, test cases, and latest benchmark results. **Benchmark Definition JSON** The benchmark definition JSON provides information about the script preparation code and HTML preparation code for the benchmark. In this case: * Script Preparation Code: `var data = Array.from({ length: 10000 }).map((_, idx) => idx)` + Creates an array of 10,000 elements using `Array.from()` with a generator function that maps each index to its value. * HTML Preparation Code: None + No HTML code is provided for preparation. **Individual Test Cases** The individual test cases are defined in the "Benchmark Definition" section. Each test case represents a different approach to creating an object from the `data` array: 1. **Test Case 1:** `data.reduce((acc, val) => ({ ...acc, [val]: val }), {})` + Uses `reduce()` to create an object where each key is the value from the array and its corresponding value. + Approach: Creating an object using `reduce()` with a spread operator (`{ ... }`). 2. **Test Case 2:** `data.reduce((acc, val) => Object.assign(acc, {[val]: val}))` + Uses `reduce()` to create an object where each key is the value from the array and its corresponding value. + Approach: Using `Object.assign()` to assign values to existing keys in the accumulator object. 3. **Test Case 3:** `Object.fromEntries(data.reduce((acc, val) => acc.set(val, val), new Map()))` + Uses `reduce()` to create a map where each key-value pair comes from the array. + Approach: Using `Object.fromEntries()` to convert the map into an object. 4. **Test Case 4:** `data.reduce((acc, val) => acc[val] = val, {})` + Uses `reduce()` to set each value in the accumulator object at the corresponding index. + Approach: Creating a mutable object by assigning values using bracket notation (`[]`). **Library and Syntax** None of the provided test cases use any libraries or custom syntax. **Other Alternatives** Here are some alternative approaches to creating an object from the `data` array: * Using a `for...of` loop: `const obj = {}; for (const val of data) { obj[val] = val; }` * Using `Array.prototype.forEach()`: `const obj = {}; data.forEach((val, idx) => { obj[idx] = val; });` * Using `Lodash's `set()` function`: `const _ = require('lodash'); const obj = _.set({}, data);` Each approach has its pros and cons: * Approach 1 (reduce with spread): Fast and concise, but may not be as readable for large arrays. * Approach 2 (assign using Object.assign()): May be slower due to the repeated assignment of values, but is more explicit and readable. * Approach 3 (fromEntries): May not work in older browsers or environments that don't support `Object.fromEntries()`, but is a concise and modern way to create an object from a map. Approach 4 (mutation with bracket notation) can be problematic if the array size increases, as it may lead to slow performance due to the repeated lookups.
Comments
Confirm delete:
Do you really want to delete benchmark?