Benchmark: adding 1 char to a string

Script Preparation code:

let str = 'abc'.repeat(62)

Tests:

concatenation
str += 'def'
concat()
str = str.concat('def')
interpolation
str = `${str}def`

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concatenation
concat()
interpolation

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Chrome OS 14541.0.0

View result in a separate tab

Test name	Executions per second
concatenation	565520.2 Ops/sec
concat()	2235448.5 Ops/sec
interpolation	2265901.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark defined by the provided JSON measures the performance of different string concatenation methods in JavaScript. Here's a breakdown of what's tested, the options compared, pros and cons of each approach, and other relevant considerations.

### 1. Benchmark Details

**Name:** Adding 1 char to a string  
**Preparation Code:** Initializes a string `str` containing `'abc'` repeated 62 times.

### 2. Individual Test Cases

The benchmark tests the following string concatenation methods:

#### a. Concatenation (`str += 'def'`)
- **Description:** This method uses the `+=` operator to append 'def' to the existing string `str`.
- **Test Name:** "concatenation"
- **Pros:** 
  - Simple and straightforward syntax.
  - Easy to read and understand.
- **Cons:** 
  - May lead to performance issues with very large strings due to the immutable nature of strings in JavaScript, which results in the creation of a new string on each operation.

#### b. `concat()` method (`str = str.concat('def')`)
- **Description:** Utilizes the built-in `String.prototype.concat()` method to append 'def'.
- **Test Name:** "concat()"
- **Pros:**
  - Explicit in intent and clearly indicates a concatenation operation.
  - Can allow for concatenation of multiple strings.
- **Cons:** 
  - Similar immutability issue as the `+=` operator may arise, meaning that performance can decrease with large strings.
  - Slightly longer syntax compared to `+=`.

#### c. Template literals (`str = \`${str}def\``)
- **Description:** Uses template literals (backticks) to insert 'def' into the existing string.
- **Test Name:** "interpolation"
- **Pros:**
  - Very readable and allows for easy embedding of expressions.
  - Performance can be better due to optimizations in how JavaScript engines handle template literals, especially with larger concatenations.
- **Cons:** 
  - Potentially less familiar to new JavaScript developers who may not be used to template literals.

### 3. Benchmark Results

From the latest results:

- **Interpolation:** 2,265,901.25 executions per second
- **concat():** 2,235,448.5 executions per second
- **Concatenation:** 565,520.25 executions per second

### 4. Observations

- **Performance:** Template literals exhibited the best performance among the methods tested, followed closely by the `concat()` method. Traditional concatenation using `+=` was significantly slower. This reflects the overhead associated with creating new strings in memory when using `+=`.
- **Readability vs. Performance:** While performance is crucial, readability and maintainability of code should also be considered when choosing a method for string concatenation, especially in larger codebases or where string manipulation is frequent.
- **Browser Variability:** The benchmark was conducted in a specific browser (Chrome 132 on Chrome OS). Performance may vary in different environments or with different JavaScript engines.

### 5. Alternatives

Other string manipulation alternatives include:

- **Array Join Method:** Creating an array of strings and using `Array.prototype.join('')` to concatenate them can be significantly faster for a large number of concatenations. For example:
  ```javascript
  let result = ['abc', 'def'].join('');
  ```
  
- **String Builder Pattern:** If frequent modifications of strings are required, designing a simple string builder object that optimally handles string concatenations can result in better performance.

### Conclusion

Overall, this benchmark illustrates important considerations for string concatenation in JavaScript. While there are multiple methods available, the performance implications of each should guide your choice based on use cases, code readability, and efficiency requirements.

Related benchmarks:

adding 1 char to a string (version: 1)

Comparing performance of: concatenation vs concat() vs interpolation

Created: one month ago by: Guest

Jump to the latest result

concatenation

concat()

interpolation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):