Benchmark: test autocomplete computed items

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>

Previous results

Test case name	Result
map
reduce
for of
map less data
reduce less data
for of less data

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

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`.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36

Browser/OS: Chrome 101 on Windows

View result in a separate tab

Test name	Executions per second
map	17.6 Ops/sec
reduce	15.6 Ops/sec
for of	15.0 Ops/sec
map less data	58.2 Ops/sec
reduce less data	55.7 Ops/sec
for of less data	57.7 Ops/sec

Related benchmarks:

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: 2 years ago by: Registered User

Jump to the latest result

map

reduce

for of

map less data

reduce less data

for of less data

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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