Benchmark: Join with array create versus loop and concat

Script Preparation code:

window.strArray = ['aThing', 'because', 'can'];
window.myRow = {
  aThing: 's value',
  because : 'I',
  can : '!'
}

Tests:

create array and join
const id = strArray.map(elem => myRow[elem]).join(',')
straight join
let id = ''; for (const elem of strArray) { id += myRow[elem]; id += ','; }

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

straight join

3.4M/s

create array and join

3.1M/s

View exact numbers

✓ straight join: 3,350,498 ops/sec
• create array and join: 3,102,224 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
create array and join
straight join

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

straight join

3.4M/s

create array and join

3.1M/s

View exact numbers

Test name	Executions per second
✓ straight join	3,401,046 Ops/sec
create array and join	3,057,069 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark being tested on MeasureThat.net.

The benchmark tests two approaches for creating an array of values from a given string, with the ultimate goal of joining those values into a single string. The approaches being compared are:

1. **Array creation and `join()` method**: This approach involves creating an array using the `map()` function, which takes an input value (in this case, each element of the `strArray`), applies a transformation to it (e.g., getting the corresponding property from `myRow`), and returns the transformed values as an array. The resulting array is then passed to the `join()` method to concatenate its elements into a single string.
2. **Looping over the array and concatenating strings**: This approach involves looping over each element of the `strArray`, appending it to a running total `id` string, and adding a comma after each appended value.

**Pros and Cons:**

* **Array creation and `join()` method**:
	+ Pros:
		- More concise and expressive syntax
		- Less error-prone (e.g., fewer opportunities for off-by-one errors)
	+ Cons:
		- May incur higher overhead due to the extra function call (`map()`) and array manipulation
		- Requires a modern JavaScript environment that supports `map()` and `join()` methods
* **Looping over the array and concatenating strings**:
	+ Pros:
		- Typically more compatible with older browsers or environments without support for `map()` and `join()`
		- Allows for easier debugging and modification of individual elements
	+ Cons:
		- More verbose and error-prone syntax
		- May result in longer execution times due to the loop overhead

**Other considerations:**

* The benchmark results will likely be influenced by factors such as the size of the input array, the complexity of the transformation function (e.g., `myRow[elem]`), and the specific browser or environment being tested.
* MeasureThat.net's benchmarks often aim to identify performance differences between modern JavaScript features and older syntax or approaches.

**Library usage:**

None mentioned in the provided benchmark definition. However, it's worth noting that some libraries (e.g., Lodash) provide `map()` and `join()` methods for arrays, which might be used in additional test cases or variations of this benchmark.

**Special JS feature/syntax:**

There are no specific JavaScript features or syntax being tested in this benchmark. The approaches being compared are relatively straightforward and do not rely on any advanced JavaScript concepts.

Join with array create versus loop and concat (version: 1) Benchmark.js

Comparing performance of: `create array and join vs straight join`

Created: 2 years ago by: Registered User

Go to the latest result

create array and join

straight join

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Join with array create versus loop and concat (version: 1) Benchmark.js

Comparing performance of: create array and join vs straight join

Created: 2 years ago by: Registered User

Go to the latest result

create array and join

straight join

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `create array and join vs straight join`