Benchmark: Clamp with various implementations

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

Using if
const clamp = (x, minValue, maxValue) => { if (minValue > maxValue) { const temp = minValue; minValue = maxValue; maxValue = temp; } if (x <= minValue) return minValue; if (x >= maxValue) return maxValue; return x; } clamp(5, 0, 10); clamp(-10, 0, 10); clamp(15, 0, 10); clamp(0, 0, 10); clamp(10, 0, 10); clamp(5, 5, 5); clamp(10, 5, 5); clamp(-3, 5, 5); clamp(-5, -10, 0); clamp(-15, -10, 0); clamp(5, -10, 0); clamp(5, 10, 0); clamp(-5, 10, 0); clamp(15, 10, 0); clamp(100, 0, Infinity); clamp(-100, -Infinity, 100); clamp(NaN, 0, 10);
Using min and max
const clamp = (x, minValue, maxValue) => Math.max(minValue, Math.min(x, maxValue)); clamp(5, 0, 10); clamp(-10, 0, 10); clamp(15, 0, 10); clamp(0, 0, 10); clamp(10, 0, 10); clamp(5, 5, 5); clamp(10, 5, 5); clamp(-3, 5, 5); clamp(-5, -10, 0); clamp(-15, -10, 0); clamp(5, -10, 0); clamp(5, 10, 0); clamp(-5, 10, 0); clamp(15, 10, 0); clamp(100, 0, Infinity); clamp(-100, -Infinity, 100); clamp(NaN, 0, 10);
Using ternary
const clamp = (x, minValue, maxValue) => { const lower = minValue < maxValue ? minValue : maxValue; const upper = minValue < maxValue ? maxValue : minValue; return x < lower ? lower : x > upper ? upper : x; } clamp(5, 0, 10); clamp(-10, 0, 10); clamp(15, 0, 10); clamp(0, 0, 10); clamp(10, 0, 10); clamp(5, 5, 5); clamp(10, 5, 5); clamp(-3, 5, 5); clamp(-5, -10, 0); clamp(-15, -10, 0); clamp(5, -10, 0); clamp(5, 10, 0); clamp(-5, 10, 0); clamp(15, 10, 0); clamp(100, 0, Infinity); clamp(-100, -Infinity, 100); clamp(NaN, 0, 10);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using if
Using min and max
Using ternary

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
Using if	97812976.0 Ops/sec
Using min and max	96997168.0 Ops/sec
Using ternary	99219888.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined on MeasureThat.net evaluates different implementations of a "clamp" function in JavaScript. The purpose of the clamp function is to restrict a numerical value to a specified range, ensuring that it doesn't go below a minimum value or above a maximum value. This functionality is often used in applications where certain constraints need to be enforced on data inputs, such as graphics programming, input validation, and physics engines.

### Implementations Compared
Three different implementations of the clamp function are compared, with their associated pros and cons as follows:

1. **Using `if` Statements**:
   - **Implementation**:
     ```javascript
     const clamp = (x, minValue, maxValue) => {
         if (minValue > maxValue) {
             const temp = minValue;
             minValue = maxValue;
             maxValue = temp;
         }
         if (x <= minValue) return minValue;
         if (x >= maxValue) return maxValue;
         return x;
     }
     ```
   - **Pros**:
     - Explicit logic, which may be easier for some developers to read and understand.
     - Flexibility in handling edge cases, such as the scenario where `minValue` is greater than `maxValue`.
   - **Cons**:
     - Slightly more verbose, which could lead to more lines of code, potentially making it less elegant.
     - Performance may be less optimal compared to more streamlined approaches.

2. **Using `Math.min` and `Math.max`**:
   - **Implementation**:
     ```javascript
     const clamp = (x, minValue, maxValue) => Math.max(minValue, Math.min(x, maxValue));
     ```
   - **Pros**:
     - Concise and utilizes built-in Math functions, which can improve readability.
     - Likely better performance due to reduced branches in execution flow.
   - **Cons**:
     - May not handle the case where `minValue` is greater than `maxValue` implicitly unless additional checks are included.
     - Potential for reduced clarity in understanding logic immediately compared to an explicit `if` structure.

3. **Using Ternary Operators**:
   - **Implementation**:
     ```javascript
     const clamp = (x, minValue, maxValue) => {
         const lower = minValue < maxValue ? minValue : maxValue;
         const upper = minValue < maxValue ? maxValue : minValue;
         return x < lower ? lower : x > upper ? upper : x;
     };
     ```
   - **Pros**:
     - Combines conditions into a compact structure, maintaining clarity on boundaries.
     - Provides a clear mechanism to handle the min-max ordering dynamically, ensuring the appropriate lower and upper bounds are applied.
   - **Cons**:
     - Ternary operators can become difficult to read if nested too deeply or used excessively.
     - May not outperform simpler implementations in terms of raw performance.

### Benchmark Results
The benchmark results indicate how many times each version of the clamp function could be executed per second on a specific browser and platform (Chrome on Windows). The results are as follows:
- Using ternary: 99,219,888 executions per second (fastest)
- Using `if`: 97,812,976 executions per second
- Using `min` and `max`: 96,997,168 executions per second

### Considerations
- **Performance**: The choice of implementation might depend on performance requirements. If the function will be called frequently in a performance-sensitive context, the fastest implementation has clear advantages.
- **Readability and Maintainability**: It's essential to balance performance with code clarity. Future maintainers of the code might appreciate a more verbose but understandable implementation.
- **Edge Case Handling**: Some implementations must be carefully examined for their handling of edge cases, such as when minimum and maximum values are incorrectly assigned.

### Alternatives
Beyond the discussed implementations, there are several other ways to achieve similar functionality, including:
- **Library Functions**: Libraries such as lodash offer a clamp method that can simplify this functionality while also handling edge cases.
- **Custom Error Handling**: Adding custom error handling for non-numeric inputs (e.g., strings or null) could enhance robustness.
- **Built-in Limitations**: Depending on the context (e.g., using a specific graphics framework), there might be built-in functions that achieve the clamping in a more optimized environment.

In summary, this benchmark allows developers to understand the performance trade-offs and stylistic choices associated with implementing a commonly used mathematical operation in JavaScript. Each implementation has its own strengths and shows how different approaches can affect performance metrics.

Related benchmarks:

Clamp with various implementations (version: 1)

Comparing performance of: Using if vs Using min and max vs Using ternary

Created: one month ago by: Guest

Jump to the latest result

Using if

Using min and max

Using ternary

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