Benchmark: switch vs if - MeasureThat.net

HTML Preparation code:

<div class="test"></div>

Script Preparation code:

var v = 8;

Tests:

switch
switch (v) { case 1: break; case 2: break; case 3: break; case 4: break; case 5: break; case 6: break; case 7: break; default: ; }
if
if (v === 1) { } else if (v === 2) { } else if (v === 3) { } else if (v === 4) { } else if (v === 5) { } else if (v === 6) { } else if (v === 7) { } else if (v === 8) { } else { }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
switch
if

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; rv:149.0) Gecko/20100101 Firefox/149.0

Browser/OS: Firefox 149 on Windows

View result in a separate tab

Test name	Executions per second
switch	790432512.0 Ops/sec
if	112640912.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, compared, and the pros/cons of each approach.

**Benchmark Definition**

The benchmark is comparing two ways to handle conditional logic in JavaScript: `switch` statements and `if` statements with multiple `else if` conditions. The test case uses a variable `v` initialized to 8.

**Script Preparation Code**
```javascript
var v = 8;
```
This code initializes the variable `v` to 8, which will be used as input for both `switch` and `if` statements.

**Html Preparation Code**
```html
<div class="test"></div>
```
This is just a placeholder HTML element, not relevant to the JavaScript benchmark itself.

**Individual Test Cases**

There are two test cases:

1. **Switch Statement**
```javascript
switch (v) {
  case 1:
    break;
  case 2:
    break;
  // ... up to v = 7
  default:
    ; // do nothing
}
```
This is a straightforward `switch` statement that checks the value of `v` against a series of cases. If `v` matches any of the cases, the corresponding code is executed.

2. **If-Else If Statement**
```javascript
if (v === 1) {
  // ...
} else if (v === 2) {
  // ...
} else if (v === 3) {
  // ...
} else if (v === 4) {
  // ...
} else if (v === 5) {
  // ...
} else if (v === 6) {
  // ...
} else if (v === 7) {
  // ...
} else if (v === 8) {
  // ...
} else {
  ; // do nothing
}
```
This is a chain of `if` statements with multiple `else if` conditions. Each condition checks the value of `v` and executes the corresponding code.

**Comparison**

The benchmark compares the execution time of these two approaches for each test case. The raw data shows that:

* For the `switch` statement, Chrome 126 on a desktop platform executed approximately 162,819,232 instructions per second.
* For the `if-else if` statement, Chrome 126 on a desktop platform executed approximately 2,334,355 instructions per second.

**Pros and Cons**

**Switch Statement:**

Pros:

* Can be faster for small number of cases (since it uses a jump table lookup)
* Can be more concise

Cons:

* Requires compile-time setup (i.e., the `case` values need to be known at compile time)

**If-Else If Statement:**

Pros:

* More flexible and can handle any number of conditions
* Does not require compile-time setup

Cons:

* Can be slower due to the overhead of multiple conditional checks
* Can be more verbose

**Other Considerations**

In general, `switch` statements are preferred when you have a small, fixed set of cases that can be known at compile time. For larger numbers of cases or dynamic conditions, `if-else if` statements may be more suitable.

It's also worth noting that modern JavaScript engines often optimize away unnecessary branches and use techniques like inlining and caching to improve performance.

**Alternatives**

Other approaches to handling conditional logic include:

* **Object-based conditionals**: Instead of using `switch` or `if`, you can use an object with property names corresponding to the conditions.
* **Ternary operators**: A single expression that evaluates to a value based on a condition, e.g., `v === 1 ? 'value if true' : 'value if false'`.
* **Function-based conditionals**: Using functions to encapsulate the logic for each case.

However, these alternatives may not be as straightforward or well-supported by older JavaScript engines.

Related benchmarks:

switch vs if (version: 0)

Comparing performance of: switch vs if

Created: 7 years ago by: Guest

Jump to the latest result

switch

if

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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