Javascript - in JS what is more efficient for determining if a string is one of many options: compare with multiple ORs or switch?

NullSalad
December 23, 2024
170 views
0 votes
2 Answers

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
}


 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?

Tags: javascript performance

Answers

Chosen as BEST ANSWER

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:

includes is less performant with scale
when it comes to finding the first element, or performs the best (wins by 11ms)
but when it comes to finding the last element, switch performs the best (wins by 20ms)
when it comes to finding no elements at all, or is juuust better than switch by 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.

(Edit)

- IsaacBlanco
- December 22, 2024 at 8:47 pm
- 0 votes
0
@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.

Login or Signup to reply.