if/else vs arrays vs switch vs ternary

JavaScript performance comparison

Test case created by Adam Siegel

Info

checks performance of the many types of case iterators in javascript.

Preparation code

<script>
function Switch( x ) {
        switch ( x ) {
                case 1: return 10; break;
                case 2: return 18448; break;
                case 3: return 188888; break;
                case 4: return 166; break;
                case 5: return 1516; break;
                case 6: return 11105; break;
                case 7: return 1215; break;
                case 8: return 1116; break;
        }      
}

function elseIf( x ) {
        if ( x == 1 ) return 10;
        else if ( x == 2 ) return 18448;
        else if ( x == 3 ) return 188888;
        else if ( x == 4 ) return 166;
        else if ( x == 5 ) return 1516;
        else if ( x == 6 ) return 11105;
        else if ( x == 7 ) return 1215;
        else if ( x == 8 ) return 1116;
}

function objects(x){
        var testObject = { 1: 10,2: 18448, 3: 188888, 4: 166, 5: 1516, 6: 11105, 7: 1215, 8:1116 };
        return testObject[x];
}

function arrays(x){
        var testArray = [10,18448,188888,166,1516,11105,1215,1116];
        return testArray[x-1];
}

function ternary(x){
       var output = x==1?10:x==2?18448:x==3?188888:x==4?166:x==5?1516:x==6?11105:x==7?1215:x==8?1116:15;
       return output;
}
</script>
<script>
Benchmark.prototype.setup = function() {
    function Switch( x ) {
            switch ( x ) {
                    case 1: return 10; break;
                    case 2: return 18448; break;
                    case 3: return 188888; break;
                    case 4: return 166; break;
                    case 5: return 1516; break;
                    case 6: return 11105; break;
                    case 7: return 1215; break;
                    case 8: return 1116; break;
            }      
    }
   
    function elseIf( x ) {
            if ( x == 1 ) return 10;
            else if ( x == 2 ) return 18448;
            else if ( x == 3 ) return 188888;
            else if ( x == 4 ) return 166;
            else if ( x == 5 ) return 1516;
            else if ( x == 6 ) return 11105;
            else if ( x == 7 ) return 1215;
            else if ( x == 8 ) return 1116;
    }
   
    function objects(x){
            var testObject = { 1: 10,2: 18448, 3: 188888, 4: 166, 5: 1516, 6: 11105, 7: 1215, 8:1116 };
            return testObject[x];
    }
   
    function arrays(x){
            var testArray = [10,18448,188888,166,1516,11105,1215,1116];
            return testArray[x-1];
    }
   
    function ternary(x){
           var output = x==1?10:x==2?18448:x==3?188888:x==4?166:x==5?1516:x==6?11105:x==7?1215:x==8?1116:15;
           return output;
    }
};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
switch
Switch(3);
pending…
if else
elseIf(3);
pending…
indexed arrays
arrays(3);
pending…
object
objects(3);
pending…
ternary
ternary(3);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

3 comments

yeikos commented :

Chrome so slow?

Steven commented :

So If/Else and Switch Statements are dramatically faster. However, what I also see is that the slowest operation (objects) is still running at over 6 million operations per second.

This is kind of like trying to decide which RAM to buy and not being able to choose between PC3-8500 and PC3-17,000. The truth is that your RAM isn't the bottleneck and for 90% of the junk people do on a computer, there will be no real difference except over huge spans of time.

Likewise no matter which of these options you choose, there will be no measurable difference unless you run them through billions of iterations or use extremely large functions, larger than should ever come up in a JavaScript project.

So despite the results I think the thing to get out of this is that you should pick whichever tactic gives you the most readable, clean code because there will likely be absolutely no perceivable difference even though there's a substantial technical difference.

me commented :

Nice! I would have guessed the array was fastest, but I was wrong - the switch wins!

Add a comment