Javascript TUTORIAL


Switch Vs if else - performance


Besides the elegance, the use of switch can lead to faster execution of the code. Consider the following two equivalent codes one written using switch and othe other written using if ..else if ...else if 

  1. <html>
  2. <body>
  3. <script type="text/javascript">
  4. <!--
  5. /*
  6. ********************************************************
  7. Reference Designer.com
  8. Example switch statement - no break
  9. ********************************************************
  10. */
  11. var x = 2;
  12. var y ;
  13. var nofiterations = 100000;	
  14.  
  15. switch (x)
  16. {
  17. case 0: for (i=0; i<=nofiterations; i++) y = x*x+1;
  18.         document.write(y);break;     
  19. case 1: for (i=0; i<=nofiterations; i++) y = x*x+1;
  20.         document.write(y);break; 
  21. case 2: for (i=0; i<=nofiterations; i++) y = x*x+1;
  22.         document.write(y);break; 
  23. case 3: for (i=0; i<=nofiterations; i++) y = x*x+1;
  24.         document.write(y);break; 
  25. case 4: for (i=0; i<=nofiterations; i++) y = x*x+1;
  26.         document.write(y);break;     
  27. case 5: for (i=0; i<=nofiterations; i++) y = x*x+1;
  28.         document.write(y);break; 
  29. case 6: for (i=0; i<=nofiterations; i++) y = x*x+1;
  30.         document.write(y);break; 
  31. case 7: for (i=0; i<=nofiterations; i++) y = x*x+1;
  32.         document.write(y);break;
  33. case 8: for (i=0; i<=nofiterations; i++) y = x*x+1;
  34.         document.write(y);break; 
  35. case 9: for (i=0; i<=nofiterations; i++) y = x*x+1;
  36.         document.write(y);break;
  37. default:
  38.  
  39. }
  40. //-->
  41. </script>
  42. </body>
  43. </html>
 




  1. <html>
  2. <body>
  3. <script type="text/javascript">
  4. <!--
  5. /*
  6. ********************************************************
  7. Reference Designer.com
  8. Example switch statement - no break
  9. ********************************************************
  10. */
  11. var x = 9;
  12. var y ;
  13. var nofiterations = 100000;	
  14.  
  15.  
  16. if ( x ==0) {
  17.             for (i=0; i<=nofiterations; i++) y = x*x+1;
  18.             document.write(y);
  19.             }
  20. else if ( x == 1) {
  21.             for (i=0; i<=nofiterations; i++) y = x*x+1;
  22.             document.write(y);
  23.             }  
  24. else if ( x == 2) {
  25.             for (i=0; i<=nofiterations; i++) y = x*x+1;
  26.             document.write(y);
  27.             }  
  28. else if ( x == 3) {
  29.             for (i=0; i<=nofiterations; i++) y = x*x+1;
  30.             document.write(y);
  31.             }  
  32. else if ( x == 4) {
  33.             for (i=0; i<=nofiterations; i++) y = x*x+1;
  34.             document.write(y);
  35.             }  
  36. else if ( x == 5) {
  37.             for (i=0; i<=nofiterations; i++) y = x*x+1;
  38.             document.write(y);
  39.             }  
  40. else if ( x == 6) {
  41.             for (i=0; i<=nofiterations; i++) y = x*x+1;
  42.             document.write(y);
  43.             }  
  44. else if ( x == 7) {
  45.             for (i=0; i<=nofiterations; i++) y = x*x+1;
  46.             document.write(y);
  47.             }  
  48. else if ( x == 8) {
  49.             for (i=0; i<=nofiterations; i++) y = x*x+1;
  50.             document.write(y);
  51.             }  
  52. else if ( x == 9) {
  53.             for (i=0; i<=nofiterations; i++) y = x*x+1;
  54.             document.write(y);
  55.             }  
  56.  
  57. //-->
  58. </script>
  59. </body>
  60. </html>


In the case of the the if else, the execution time will heaviliy depend upon the value of x. If x == 9, the if else case brings a worst case scenario. If x == 0 the if else case is best for timing.

The switch case has same timing irrespective of the value of x. In general switch statement leads to on average, faster execution. Note that the exact time will also be browser dependent. You can try this example online here.