Benchmark: string concat 3 ways

Script Preparation code:

var foo = 'foo';
var bar = 'bar';
var baz = 'baz';
var arr = [foo, bar, baz];

Tests:

Create Array and Join
var i = 10000; while (i--) { var str = [foo, bar, baz].join(' '); }
Array join only
var i = 10000; while (i--) { var str = arr.join(' '); }
es6
var i = 10000; while (i--) { var str = `${foo} ${bar} ${baz}`; }
old school
var i = 10000; while (i--) { var str = foo + ' ' + bar + ' ' + baz; }
Update array and join;
var i = 10000; var updateArr = []; while (i--) { updateArr[0] = foo; updateArr[1] = bar; updateArr[2] = baz; var str = updateArr.join(' '); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Create Array and Join
Array join only
es6
old school
Update array and join;

Fastest: N/A

Slowest: N/A

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 Edg/101.0.1210.53

Browser/OS: Chrome 101 on Windows

View result in a separate tab

Test name	Executions per second
Create Array and Join	213.6 Ops/sec
Array join only	417.6 Ops/sec
es6	287.8 Ops/sec
old school	302.1 Ops/sec
Update array and join;	222.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of MeasureThat.net, a platform for creating and running JavaScript microbenchmarks.

**Benchmark Definition JSON**

The provided JSON represents a benchmark definition with the following elements:

* `Name`: A descriptive name for the benchmark.
* `Description`: A brief summary of what the benchmark is testing.
* `Script Preparation Code`: A snippet of JavaScript code that sets up variables, arrays, and other necessary data before running the actual benchmark. In this case, it creates an array `arr` containing three string literals: "foo", "bar", and "baz".
* `Html Preparation Code`: An empty string, indicating that no HTML preparation is required.

**Individual Test Cases**

The benchmark consists of four test cases, each with its own definition in the `Benchmark Definition` section. These definitions contain a `Test Name`, which is used to identify the specific test case. The code snippets for these test cases are identical:

1. **Create Array and Join**: Creates an array `arr` containing "foo", "bar", and "baz" and then joins its elements with spaces using the `[].join()` method.
2. **Array join only**: Same as Create Array and Join, but without creating a local variable `str`.
3. **ES6**: Uses template literals to create a string by concatenating "foo", "bar", and "baz" with spaces.
4. **Old school**: Concatenates "foo", "bar", and "baz" with spaces using the `+` operator.

**Comparison of Options**

The benchmark is testing four different approaches:

* **Create Array and Join** (Benchmark 1): Creates an array, joins its elements, and assigns the result to a variable `str`.
* **Array join only** (Benchmark 2): Joins the array elements directly without creating a local variable.
* **ES6** (Benchmark 3): Uses template literals to create a string by concatenating values with spaces.
* **Old school** (Benchmark 4): Concatenates strings using the `+` operator.

Pros and Cons of each approach:

* **Create Array and Join**: Easy to read and understand, but can be slower due to array creation and assignment. Pros: readability; cons: potential performance overhead.
* **Array join only**: Efficient, as it directly joins the array elements without creating a local variable. However, it may not be immediately clear what's happening in the code. Pros: performance; cons: less readable.
* **ES6**: Modern syntax that can improve performance due to faster string concatenation and template literal evaluation. However, its usage might require additional setup or understanding of modern JavaScript features. Pros: potential performance boost; cons: requires knowledge of ES6 features.
* **Old school**: Simple and well-known approach that has been around for a long time. However, it can be slower due to repeated concatenation operations. Pros: familiarity; cons: potential performance overhead.

**Library Use**

None of the test cases use external libraries beyond the built-in JavaScript array methods (`[].join()`). If any additional functionality or data structures were needed, MeasureThat.net might require modifications to accommodate the required libraries.

**Special JS Features/Syntax**

The ES6 template literals (Benchmark 3) are a special feature that allows for more efficient and readable string concatenation. It's not necessary for older JavaScript versions, but its use has become widespread in modern web development.

Other Alternatives

If you wanted to create similar benchmarks using different programming languages or frameworks, MeasureThat.net provides an excellent framework for testing performance and optimizing code. Some alternative platforms for creating microbenchmarks include:

* Google Benchmark (C++-based)
* Micro benchmarking libraries for Python (e.g., Pytest-microbenchmark), Java (e.g., JMH), and other programming languages
* Online tools for benchmarking, such as Benchmark.js or Fast-benchmark

These alternatives can help you create benchmarks in different languages or frameworks, allowing you to compare performance across various implementations.

Related benchmarks:

string concat 3 ways (version: 0)

Compare setAttribute to dataset

Comparing performance of: Create Array and Join vs Array join only vs es6 vs old school vs Update array and join;

Created: 3 years ago by: Guest

Jump to the latest result

Create Array and Join

Array join only

es6

old school

Update array and join;

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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