Question 419520 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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): graph of finding first element graph of finding last element graph of finding no elements

    It seems like the answer is:

    1. includes is less performant with scale
    2. when it comes to finding the first element, or performs the best (wins by 11ms)
    3. but when it comes to finding the last element, switch performs the best (wins by 20ms)
    4. 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.


  2. 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.
Please signup or login to give your own answer.

Back To Top
Search