Example: I want to see if a key press is one of 4 different keys.
Option 1:
if(e.key === "ArrowUp" ||
e.key === "ArrowDown" ||
e.key === "Control" ||
e.key === "Escape" || ){
// do stuff
}
vs
switch(e.key){
case "ArrowUp":
case "ArrowDown":
case "Control":
case "Escape":
// do stuff
break;
default:
break;
}
There are many resources out there showing that a switch statement is more performant than multiple ifs. But what about a single if with multiple ORs vs a switch statement?
7
It was suggested to run some benchmarks and also include includes so here they are:
function testOr(k){
if(k === "ArrowUp" ||
k === "ArrowDown" ||
k === "Control" ||
k === "Escape" ){
return true
}
}
function testSwitch(k){
switch(k){
case "ArrowUp":
case "ArrowDown":
case "Control":
case "Escape":
return true
break;
default:
break;
}
}
function testIncludes(k){
if([ "ArrowUp", "ArrowDown", "Control", "Escape"].includes(k)){return true}
}
function test(x, fn, k){
const start = Date.now();
for (let i=0; i<k; i++){
fn(x)
}
console.log(`total time spent: ${Date.now()-start}`)
}
const iterations = [ 1000, 10000, 100000, 1000000 ]
// testing begins
iterations.forEach(t=>test("ArrowUp", testOr, t)) // finding first element
iterations.forEach(t=>test("Escape", testOr, t)) // finding last element
iterations.forEach(t=>test("asdf", testOr, t)) // finding nothing
// repeated for testSwitch and testIncludes
Results (in ms):
| switch | or | includes | input type | iterations |
|---|---|---|---|---|
| 0 | 0 | 0 | first element | 1000 |
| 2 | 2 | 4 | first element | 10000 |
| 20 | 17 | 40 | first element | 100000 |
| 206 | 195 | 378 | first element | 1000000 |
| 1 | 1 | 1 | last element | 1000 |
| 2 | 3 | 3 | last element | 10000 |
| 22 | 24 | 43 | last element | 100000 |
| 236 | 256 | 381 | last element | 1000000 |
| 1 | 0 | 1 | not included | 1000 |
| 2 | 2 | 3 | not included | 10000 |
| 28 | 27 | 36 | not included | 100000 |
| 273 | 270 | 392 | not included | 1000000 |
Plotted (lower = better):
It seems like the answer is:
includesis less performant with scale- when it comes to finding the first element,
orperforms the best (wins by 11ms) - but when it comes to finding the last element,
switchperforms the best (wins by 20ms) - when it comes to finding no elements at all,
oris juuust better thanswitchby 3ms
Moral of the story: don’t use includes, switch is the way to go for the worst case scenario, or is the way to go for best case scenario.
6
@Null Salad, as you mentioned, the switch-case statement is generally more performant than an if-else statement, especially when dealing with large if-else ladders compared to their equivalent switch representation. You can find more details here
In this particular case, if you have a small number of conditions, the performance difference between if-else and switch-case is negligible. The only factor that matters is readability, and personally, I find if-else to be the better option.
Isaac Blanco is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1