Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
test autocomplete computed items
(version: 13)
Comparing performance of:
map vs reduce vs for of vs map less data vs reduce less data vs for of less data
Created:
3 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
Script Preparation code:
var clientsSeed = [{ __typename: "Client", id: 14048, prefix: null, firstName: "Adams, Haag and Murray", middle: null, lastName: null, suffix: null, address1: null, address2: null, city: null, state: null, zip: null, businessPhone: null, homePhone: null, email: "damiang@pulse360.com", dob: null, gender: null, salutation: null, company: "Adams, Haag and Murray", greeting: null, spouse: null, aliases: null, goals: [], type: "other", existsInCrm: "EXISTS", checklist: null, external_assets: [], future_strategies: [], social_media: null, }, { __typename: "Client", id: 14049, prefix: null, firstName: "Association test", middle: null, lastName: null, suffix: null, address1: "avenida siempre viva 123", address2: "", city: "Los Angeles", state: "CA", zip: "90016", businessPhone: null, homePhone: null, email: "damian.galetto@gmail.com", dob: null, gender: null, salutation: null, company: "Association test", greeting: null, spouse: null, aliases: null, goals: [], type: "other", existsInCrm: "EXISTS", checklist: null, external_assets: [], future_strategies: [], social_media: null, }, { __typename: "Client", id: 14050, prefix: null, firstName: "Tilt Digital", middle: null, lastName: null, suffix: null, address1: "103 Burnt", address2: "Lower Bourne", city: "Farnham", state: "SRY", zip: "00GU1-03lh", businessPhone: null, homePhone: null, email: "jamie@tiltdigital.com", dob: null, gender: null, salutation: null, company: "Tilt Digital", greeting: null, spouse: null, aliases: null, goals: [], type: "company", existsInCrm: "EXISTS", checklist: null, external_assets: [], future_strategies: [], social_media: null, }, { __typename: "Client", id: 14051, prefix: null, firstName: "Osinski, Goodwin and Bogan", middle: null, lastName: null, suffix: null, address1: null, address2: null, city: null, state: null, zip: null, businessPhone: null, homePhone: null, email: null, dob: null, gender: null, salutation: null, company: "Osinski, Goodwin and Bogan", greeting: null, spouse: null, aliases: null, goals: [], type: "company", existsInCrm: "EXISTS", checklist: null, external_assets: [], future_strategies: [], social_media: null, }, { __typename: "Client", id: 14052, prefix: null, firstName: "Rice and Sons", middle: null, lastName: null, suffix: null, address1: null, address2: null, city: null, state: null, zip: null, businessPhone: null, homePhone: null, email: null, dob: null, gender: null, salutation: null, company: "Rice and Sons", greeting: null, spouse: null, aliases: null, goals: [], type: "company", existsInCrm: "EXISTS", checklist: null, external_assets: [], future_strategies: [], social_media: null, }, { __typename: "Client", id: 14053, prefix: null, firstName: "Kihn Inc", middle: null, lastName: null, suffix: null, address1: null, address2: null, city: null, state: null, zip: null, businessPhone: null, homePhone: null, email: null, dob: null, gender: null, salutation: null, company: "Kihn Inc", greeting: null, spouse: null, aliases: null, goals: [], type: "company", existsInCrm: "EXISTS", checklist: null, external_assets: [], future_strategies: [], social_media: null, }, { __typename: "Client", id: 14054, prefix: null, firstName: "Marks Group", middle: null, lastName: null, suffix: null, address1: null, address2: null, city: null, state: null, zip: null, businessPhone: null, homePhone: null, email: null, dob: null, gender: null, salutation: null, company: "Marks Group", greeting: null, spouse: null, aliases: null, goals: [], type: "company", existsInCrm: "NON_EXISTENT", checklist: null, external_assets: [], future_strategies: [], social_media: null, }, { __typename: "Client", id: 14055, prefix: null, firstName: "Grant-Kilback", middle: null, lastName: null, suffix: null, address1: null, address2: null, city: null, state: null, zip: null, businessPhone: null, homePhone: null, email: null, dob: null, gender: null, salutation: null, company: "Grant-Kilback", greeting: null, spouse: null, aliases: null, goals: [], type: "company", existsInCrm: "EXISTS", checklist: null, external_assets: [], future_strategies: [], social_media: null, }, { __typename: "Client", id: 14056, prefix: null, firstName: "Leannon and Sons", middle: null, lastName: null, suffix: null, address1: null, address2: null, city: null, state: null, zip: null, businessPhone: null, homePhone: null, email: null, dob: null, gender: null, salutation: null, company: "Leannon and Sons", greeting: null, spouse: null, aliases: null, goals: [], type: "company", existsInCrm: "EXISTS", checklist: null, external_assets: [], future_strategies: [], social_media: null, }, { __typename: "Client", id: 14057, prefix: null, firstName: "Langosh-Wilkinson", middle: null, lastName: null, suffix: null, address1: null, address2: null, city: null, state: null, zip: null, businessPhone: null, homePhone: null, email: null, dob: null, gender: null, salutation: null, company: "Langosh-Wilkinson", greeting: null, spouse: null, aliases: null, goals: [], type: "company", existsInCrm: "EXISTS", checklist: null, external_assets: [], future_strategies: [], social_media: null, }, { __typename: "Client", id: 14058, prefix: null, firstName: "Wolf and Sons", middle: null, lastName: null, suffix: null, address1: null, address2: null, city: null, state: null, zip: null, businessPhone: null, homePhone: null, email: null, dob: null, gender: null, salutation: null, company: "Wolf and Sons", greeting: null, spouse: null, aliases: null, goals: [], type: "company", existsInCrm: "EXISTS", checklist: null, external_assets: [], future_strategies: [], social_media: null, }, { __typename: "Client", id: 14059, prefix: null, firstName: "Homenick-MacGyver", middle: null, lastName: null, suffix: null, address1: null, address2: null, city: null, state: null, zip: null, businessPhone: null, homePhone: null, email: null, dob: null, gender: null, salutation: null, company: "Homenick-MacGyver", greeting: null, spouse: null, aliases: null, goals: [], type: "company", existsInCrm: "EXISTS", checklist: null, external_assets: [], future_strategies: [], social_media: null, }, ]; var clients = Array.from({length: 10000}, () => clientsSeed[Math.floor(Math.random()*clientsSeed.length)]); function getAliases(aliases = ''){ return (aliases || '').split('||').filter(Boolean).map((value, index) => ({ crmOrFirst: !index, value: value.replaceAll('__default', ''), isDefault: value.includes('__default'), rawValue: value, })) } function getAlias(client){ const { aliases } = client const alias = getAliases(aliases) if (alias.length === 0) { return null } return alias[0].value } function getClientNameWithAlias(client) { if (!client) { return 'None Selected' } const { firstName, lastName, salutation, greeting, suffix, middle } = client const alias = getAlias(client) const formatedAlias = alias ? ` "${alias}"` : '' if (lastName) { let name = lastName if (firstName) { name = `${name}, ${firstName}` name = `${name} ${formatedAlias}` if (middle) { name = `${name}, ${middle}` } if (suffix) { name = `${name}, ${suffix}` } } return name } if (greeting) { return greeting } if (salutation) { return salutation } return firstName } function getFullName(client, isFormal = false) { if (!client) { return 'None Selected' } const { firstName, lastName, suffix, prefix, middle } = client if (_.isEmpty(firstName) && !_.isEmpty(lastName)) { return lastName } if (!_.isEmpty(firstName) && _.isEmpty(lastName)) { return firstName } const suf = suffix ? `, ${suffix}` : '' const mid = middle ? ` ${middle}` : '' if (isFormal) { const pre = prefix ? `${prefix} ` : '' return `${pre}${firstName}${mid} ${lastName}${suf}` } const alias = getAlias(client) const formatedAlias = alias ? ` "${alias}"` : '' return `${firstName}${formatedAlias}${mid} ${lastName}${suf}` }
Tests:
map
clients.map((client) => ({ ...client, fullName: getClientNameWithAlias(client), label: getFullName(client) }))
reduce
clients.reduce((a, client) => { a.push( { ...client, fullName: getClientNameWithAlias(client), label: getFullName(client) } ); return a }, [])
for of
const a = [] for (const client of clients) { a.push( { ...client, fullName: getClientNameWithAlias(client), label: getFullName(client) } ); };
map less data
clients.map((client) => ({ id: client.id, fullName: getClientNameWithAlias(client), label: getFullName(client), existsInCrm: client.existsInCrm, type: client.type }))
reduce less data
clients.reduce((a, client) => { a.push( { id: client.id, fullName: getClientNameWithAlias(client), label: getFullName(client), existsInCrm: client.existsInCrm, type: client.type } ); return a }, [])
for of less data
const a = [] for (const client of clients) { a.push( { id: client.id, fullName: getClientNameWithAlias(client), label: getFullName(client), existsInCrm: client.existsInCrm, type: client.type } ); };
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (6)
Previous results
Fork
Test case name
Result
map
reduce
for of
map less data
reduce less data
for of less data
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
The benchmark results show the performance of four different JavaScript methods: `map`, `reduce`, `for...of`, and less data versions of each. **Overall Observations** * The `map` method is the fastest, with an average execution speed of 17.6 seconds per second. * The `reduce` method is slower than both `map` and the less data version of `map`. * The `for...of` method is significantly slower than the `map` method, but faster than the `reduce` method. * The "less data" versions of each method (e.g., `map less data`) are not consistently fast, with some results showing significant variations. **Detailed Analysis** * The `map` method is likely to be the fastest because it uses a simple iteration over the array and creates new elements in place. This approach minimizes overhead. * The `reduce` method, on the other hand, requires creating an accumulator and manipulating the original array, which may introduce additional overhead. * The `for...of` method is slower due to its more complex syntax and potential overhead from using a loop. However, it still performs reasonably well in this benchmark. **Recommendations** Based on these results, if performance is critical, consider using the `map` method or a similar iteration-based approach for array transformations. If you need to perform some additional operation that cannot be easily done with `map`, consider rewriting your code to use `reduce` instead of `for...of`. However, keep in mind that the "less data" versions may not provide significant performance benefits. If possible, try to optimize your code by reducing unnecessary computations or using more efficient algorithms. Additionally, if you're working with large datasets, consider using libraries or frameworks optimized for performance, such as `Array.prototype.map()` or `lodash`.
Related benchmarks:
foreach vs filter+map
Lodash filter + map vs forEach - corrected
Lodash vs. Set Intersection vs Array intersection 3
Join vs loop
Comments
Confirm delete:
Do you really want to delete benchmark?