Benchmark: test array or interpolation

Script Preparation code:

var customer = {
    firstName: 'firstName',
    lastName: 'lastName'
}

Tests:

1
(!customer.firstName && !customer.lastName) ? this.$t('loyalty.account.customer.fullnameNotSet') : ((customer.firstName ? customer.firstName : '') + (customer.lastName ? (customer.firstName ? ' ' : '') + customer.lastName : ''))
2
(customer.firstName || customer.lastName) ? [customer.firstName, customer.lastName].join(' ').trim() : 'translate'
3
`${customer.firstName || ''} ${customer.lastName || ''}`.trim() || 'translate'

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1
2
3

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):

LLMs can make mistakes. Check important info.

I'll break down the provided JSON and explain what's being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark definition represents three different approaches to concatenate strings in JavaScript when a customer's first and last names are not set. The purpose of this benchmark is to measure which approach is the most efficient.

**Script Preparation Code**

The script preparation code defines an object `customer` with properties `firstName` and `lastName`, initialized with sample values: `firstName: 'firstName', lastName: 'lastName'`.

**Html Preparation Code**

There is no HTML preparation code provided, so we can assume it's not relevant to this benchmark.

**Individual Test Cases**

Each test case represents a different approach to concatenate strings:

1. **Test Case 1**
```javascript
(!customer.firstName && !customer.lastName) 
    ? this.$t('loyalty.account.customer.fullnameNotSet') 
    : ((customer.firstName ? customer.firstName : '') + (customer.lastName ? (customer.firstName ? ' ' : '') + customer.lastName : ''))
```
This approach uses a ternary operator to check if either `firstName` or `lastName` is set. If neither is set, it returns a translated string. Otherwise, it concatenates the names with spaces in between.

Pros: Simple and readable.
Cons: May be slower due to the nested ternaries.

2. **Test Case 2**
```javascript
(customer.firstName || customer.lastName) ? 
    [customer.firstName, customer.lastName].join(' ').trim() : 
    'translate'
```
This approach uses the OR operator (`||`) to check if either `firstName` or `lastName` is set. If one of them is set, it joins the names with spaces and trims the result. Otherwise, it returns a fixed string `'translate'`.

Pros: Concise and efficient.
Cons: May not be readable for all developers.

3. **Test Case 3**
```javascript
`${customer.firstName || ''} ${customer.lastName || ''}`.trim() || 'translate'
```
This approach uses template literals to concatenate the names with spaces in between, similar to Test Case 1. However, it uses the OR operator (`||`) for string concatenation.

Pros: Simple and readable.
Cons: May be slower due to the unnecessary string creation.

**Latest Benchmark Result**

The latest benchmark result shows the execution times per second for each test case on a Chrome 91 browser:

| Test Name | ExecutionsPerSecond |
| --- | --- |
| 1 | 4334239.0 |
| 2 | 2619712.0 |
| 3 | 2160892.75 |

The results suggest that Test Case 1 is the fastest, followed closely by Test Case 3. Test Case 2 is slower than both.

**Other Considerations**

* The use of template literals (Test Case 3) might be a factor in its relatively high execution time.
* The OR operator (`||`) can lead to faster concatenation, but may not be readable for all developers.
* The `join()` method used in Test Case 2 is a common approach for string concatenation.

**Alternatives**

Other alternatives for concatenating strings in JavaScript include:

* Using the `+` operator directly: `(customer.firstName || customer.lastName)`
* Using a string interpolation library like Moment.js
* Using a template engine like Handlebars or Mustache

However, these alternatives may not be as concise or readable as the approaches used in the benchmark.

Related benchmarks:

test array or interpolation (version: 0)

Comparing performance of: 1 vs 2 vs 3

Created: 4 years ago by: Guest

Jump to the latest result

1

2

3

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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