Benchmark: Switch vs. Object literal

Script Preparation code:

var strs = [
'back',
'close',
'eye-off',
'eye-on',
'loader',
'loader-tj',
'loader-bnpl',
'loader-bnpl-koshelek',
'narrow',
'arrow-right',
'card',
'question',
'avatar',
'info',
'warning-large',
'globe'
];
var str = strs[Math.floor(Math.random() * (strs.length - 1))];

Tests:

Switch
switch (str) { case 'back': console.log('back'); break; case 'close': console.log('close'); break; case 'eye-off': console.log('eye-off'); break; case 'eye-on': console.log('eye-on'); break; case 'loader': console.log('loader'); break; case 'loader-tj': console.log('loader-tj'); break; case 'loader-bnpl': console.log('loader-bnpl'); break; case 'loader-bnpl-koshelek': console.log('loader-bnpl-koshelek'); break; case 'narrow': console.log('narrow'); break; case 'arrow-right': console.log('arrow-right'); break; case 'card': console.log('card'); break; case 'question': console.log('question'); break; case 'avatar': console.log('avatar'); break; case 'info': console.log('info'); break; case 'warning-large': console.log('warning-large'); break; case 'globe': console.log('globe'); break; }
Object notation
var objNotation = { 'back': () => { console.log('back') }, 'close': () => { console.log('close') }, 'eye-off': () => { console.log('eye-off') }, 'eye-on': () => { console.log('eye-on') }, 'loader': () => { console.log('loader') }, 'loader-tj': () => { console.log('loader-tj') }, 'loader-bnpl': () => { console.log('loader-bnpl') }, 'loader-bnpl-koshelek': () => { console.log('loader-bnpl-koshelek') }, 'narrow': () => { console.log('narrow') }, 'arrow-right': () => { console.log('arrow-right') }, 'card': () => { console.log('card') }, 'question': () => { console.log('question') }, 'avatar': () => { console.log('avatar') }, 'info': () => { console.log('info') }, 'warning-large': () => { console.log('warning-large') }, 'globe': () => { console.log('globe') }, } objNotation[str]();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Switch
Object notation

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/113.0

Browser/OS: Firefox 113 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Switch	176303.5 Ops/sec
Object notation	162262.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The benchmark measures the performance difference between two approaches: `switch` statements and object literals (also known as bracket notation). The test is designed to compare the execution speed of these two approaches when dealing with a large number of string keys.

**Switch Statements vs. Object Literals**

There are pros and cons to each approach:

**Switch Statements**

Pros:

* Can be more readable, especially for small numbers of cases
* Can be faster due to the compiler's ability to optimize jump tables

Cons:

* Can be slower for large numbers of cases (due to the overhead of the `switch` statement)
* Can lead to longer compilation times if not properly optimized

**Object Literals**

Pros:

* Can be more concise and readable, especially for large numbers of keys
* Can be faster due to the elimination of the need for jump tables

Cons:

* May require more memory allocation (due to the creation of a new object)
* Can lead to slower execution times if not properly optimized

**Library: None**

Neither approach uses any external libraries or dependencies.

**Special JS Feature/Syntax: Bracket Notation**

Object literals use bracket notation (`objNotation[str]`) to access properties, which is a shorthand way of writing `objNotation['str']`. This syntax is commonly used in modern JavaScript code and can be faster than traditional property access (e.g., using dot notation or square brackets).

**Alternative Approaches**

Other alternatives for achieving the same result as object literals include:

* Using dot notation: `objNotation.str`
* Using square bracket notation: `objNotation['str']`
* Using a function to dynamically retrieve the property: `function getProp(obj, str) { return obj[str]; }`

These approaches may have different performance characteristics and trade-offs in terms of readability and conciseness.

**Benchmark Preparation Code**

The provided benchmark preparation code generates an array of strings (`strs`) and selects one randomly using `Math.floor(Math.random() * (strs.length - 1))`. It then creates a string variable `str` based on the selected value. The `Script Preparation Code` section defines the switch statement, while the `Html Preparation Code` section is empty.

**Individual Test Cases**

The individual test cases define two separate benchmarks:

* "Switch" uses a traditional `switch` statement to access the properties of an object.
* "Object notation" uses bracket notation (`objNotation[str]`) to access the properties of an object.

The test data includes the raw UA string, browser name, device platform, operating system, executions per second, and test name for each benchmark.

Related benchmarks:

Switch vs. Object literal (version: 0)

Comparing performance of: Switch vs Object notation

Created: one year ago by: Guest

Jump to the latest result

Switch

Object notation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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