Benchmark: classcat, clsx, obj-str, vanilla

HTML Preparation code:

<script type="module">
    import classcat from "https://unpkg.com/classcat?module"
    window.classcat = classcat
</script>
<script type="module">
    import objstr from "https://unpkg.com/obj-str?module"
    window.objstr = objstr
</script>
<script src='https://unpkg.com/clsx@latest/dist/clsx.min.js'></script>

Script Preparation code:

var obj = {
    one: true,
    abcd: Math.random() <= 0.5,
    efghijkl: Math.random() <= 0.5,
    mnopqrstuvwxyz: Math.random() <= 0.5,
    efghijklmnopqrstuvwxyz: Math.random() <= 0.5,
    abcdefghijklmnopqrstuvwxyz: Math.random() <= 0.5,
    abcd: Math.random() <= 0.5,
    efghijkl: Math.random() <= 0.5,
    mnopqrstuvwxyz: Math.random() <= 0.5,
    efghijklmnopqrstuvwxyz: Math.random() <= 0.5,
    abcdefghijklmnopqrstuvwxyz: Math.random() <= 0.5,
    two: false,
    three: true
}

var arr = [
    true && "one",
    Math.random() <= 0.5 && "abcd",
    Math.random() <= 0.5 && "efghijkl",
    Math.random() <= 0.5 && "mnopqrstuvwxyz",
    Math.random() <= 0.5 && "efghijklmnopqrstuvwxyz",
    Math.random() <= 0.5 && "abcdefghijklmnopqrstuvwxyz",
    Math.random() <= 0.5 && "abcd",
    Math.random() <= 0.5 && "efghijkl",
    Math.random() <= 0.5 && "mnopqrstuvwxyz",
    Math.random() <= 0.5 && "efghijklmnopqrstuvwxyz",
    Math.random() <= 0.5 && "abcdefghijklmnopqrstuvwxyz",
    false && "two",
    true && "three",
]

Tests:

classcat(arr)
window.classcat(arr)
classcat(obj)
window.classcat(obj)
clsx(arr)
clsx(arr)
clsx(obj)
clsx(obj)
objstr(obj)
window.objstr(obj)
arr.filter(Boolean).join(" ")
arr.filter(Boolean).join(" ")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classcat(arr)
classcat(obj)
clsx(arr)
clsx(obj)
objstr(obj)
arr.filter(Boolean).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/106.0.0.0 Safari/537.36 Edg/106.0.1370.42

Browser/OS: Chrome 106 on Windows

View result in a separate tab

Test name	Executions per second
classcat(arr)	2214437.2 Ops/sec
classcat(obj)	3248370.0 Ops/sec
clsx(arr)	3677005.8 Ops/sec
clsx(obj)	3471210.5 Ops/sec
objstr(obj)	3353869.8 Ops/sec
arr.filter(Boolean).join(" ")	2321197.2 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases, explaining what's being tested, compared, and their pros and cons.

**Benchmark Definition JSON**

The provided benchmark definition is a JSON object that represents a set of tests to be run on MeasureThat.net. The main object contains four properties:

*   `Name`: A unique name for the benchmark.
*   `Description`: An optional description of the benchmark.
*   `Script Preparation Code`: A code snippet used to prepare the test data and environment.
*   `Html Preparation Code`: HTML code that sets up any dependencies or libraries required for the tests.

**Individual Test Cases**

The individual test cases are defined in an array, each containing:

*   `Benchmark Definition`: The actual JavaScript code that will be executed on MeasureThat.net.
*   `Test Name`: A human-readable name for the test case.

Let's examine each test case individually:

### 1. classcat(arr)

This test case uses the `classcat` library to convert an array of strings into a single string, separated by spaces.

```javascript
window.classcat(arr)
```

**Library:** `classcat` - A utility library that provides a simple way to concatenate arrays of values into a single string.

**Pros:**

*   Easy to use and understand.
*   Provides a consistent output format for the concatenated strings.

**Cons:**

*   May not be suitable for all types of data (e.g., large arrays or objects).
*   Does not handle errors well; if any elements in the array are invalid, it may throw an error.

### 2. classcat(obj)

This test case uses the `classcat` library to convert a JavaScript object into a single string, separated by spaces.

```javascript
window.classcat(obj)
```

**Library:** Same as above (`classcat`) - The same utility library is used for both array and object concatenation.

**Pros:**

*   Consistent output format with the `arr` test case.
*   Easy to use and understand.

**Cons:**

*   May not be suitable for all types of data (e.g., large objects or nested structures).

### 3. clsx(arr)

This test case uses the `clsx` library to convert an array of strings into a single string, separated by spaces.

```javascript
clsx(arr)
```

**Library:** `clsx` - A utility library that provides a simple way to concatenate arrays of values into a single string, but with more control over the separator and formatting options.

**Pros:**

*   More flexible than `classcat`, allowing for customization of separators and formatting.
*   Handles errors better than `classcat`.

**Cons:**

*   Requires more code to achieve the same result as `classcat`.
*   May be less intuitive for those familiar with `classcat`.

### 4. clsx(obj)

This test case uses the `clsx` library to convert a JavaScript object into a single string, separated by spaces.

```javascript
clsx(obj)
```

**Library:** Same as above (`clsx`) - The same utility library is used for both array and object concatenation.

**Pros:**

*   More flexible than `classcat`, allowing for customization of separators and formatting.
*   Handles errors better than `classcat`.

**Cons:**

*   Requires more code to achieve the same result as `classcat`.
*   May be less intuitive for those familiar with `classcat`.

### 5. objstr(obj)

This test case uses a custom implementation (not shown in the provided code) to convert a JavaScript object into a single string, separated by spaces.

```javascript
objstr(obj)
```

**Library:** Custom implementation - This is not a standard library but rather a custom function that achieves the same result as `classcat` or `clsx`.

**Pros:**

*   Provides more control over the output format and formatting options.
*   Can be optimized for performance.

**Cons:**

*   May require more code to implement correctly.
*   May not be suitable for all types of data (e.g., large objects or nested structures).

### 6. arr.filter(Boolean).join(' ')

This test case uses the built-in `filter()` and `join()` methods to convert an array of strings into a single string, separated by spaces.

```javascript
arr.filter(Boolean).join(' ')
```

**Pros:**

*   Easy to understand and implement.
*   Handles errors well; if any elements in the array are invalid, it will simply filter them out.

**Cons:**

*   May not be suitable for all types of data (e.g., large arrays or objects).
*   Does not provide a consistent output format for concatenated strings.

Related benchmarks:

classcat, clsx, obj-str, vanilla (version: 1)

Comparing performance of: classcat(arr) vs classcat(obj) vs clsx(arr) vs clsx(obj) vs objstr(obj) vs arr.filter(Boolean).join(" ")

Created: 3 years ago by: Registered User

Jump to the latest result

classcat(arr)

classcat(obj)

clsx(arr)

clsx(obj)

objstr(obj)

arr.filter(Boolean).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):