JavaScript switch Statement

Select a case in the switch statement. Compare the switch to an if-else block.

Switch. Consider a variable. Its value may be 10, 20 or 30. We can test this in a switch statement, and this may offer optimal performance.

Switch considerations. JavaScript now is a compiled language. Is it worth using a switch statement (on integers) instead of a series of if-else tests?

First example. It is good to start with a simple example. Here we see a switch statement inside a function called testValue. We pass an integer to testValue.

And: The switch statement determines what value to return based on the argument.

Note: If no cases match, the switch is exited. We then reach the "return 0" so the value zero is returned.

JavaScript program that uses switch in function function testValue(value) { "use strict"; // Switch on the argument to return a number. switch (value) { case 0: return -1; case 1: return 100; case 2: return 200; } return 0; } // Call testValue. console.log("SWITCH RESULT: " + testValue(0)) console.log("SWITCH RESULT: " + testValue(2)) Output SWITCH RESULT: -1 SWITCH RESULT: 200

Default. A case matches just one value—an integer or string. But the default case matches all other values. It is an "else" clause in the switch.

JavaScript program that uses default var number = 5; // Use a default case in this switch. switch (number) { case 4: console.log("FOUR"); break; default: console.log("NOT FOUR"); } Output NOT FOUR

Last break statement. In JavaScript the last break statement is not required. The last case statement will execute without a break and no errors will occur.

Note: Fall through occurs when no break is present, but for the last case (often "default") this will not change behavior.

Performance: In a brief test, I found that Google Chrome has no performance change if you omit the last break statement.

JavaScript program that omits last break function test(value) { // No break statement is required on the last case. switch (value) { case 0: console.log("ZERO"); break; case 1: console.log("ONE"); break; case 2: console.log("TWO"); } } test(0); test(1); test(2); Output ZERO ONE TWO

Benchmark, if versus swift. We test the numbers 0 through 4 in an if-statement and a switch statement. Each case occurs the same number of times (20%).

Version 1: In this version of the code we perform some logic on a loop index variable with the if-statement.

Version 2: Here we perform the same actions on the variable "y" as version 1, but we use a switch instead of an if-statement.

Result: The switch program is noticeably faster. This is true in many browsers, including Safari, Firefox and Chrome.

JavaScript program that benchmarks if, switch var y = 0; var x1 = performance.now(); // Version 1: use if-statement. for (var i = 0; i < 10000000; i++) { for (var z = 0; z <= 4; z++) { if (z == 0) { y++; } else if (z == 1) { y--; } else if (z == 2) { y += 2; } else if (z == 3) { y -= 2; } else if (z == 4) { y += 3; } } } var x2 = performance.now(); // Version 2: use switch. for (var i = 0; i < 10000000; i++) { for (var z = 0; z <= 4; z++) { switch (z) { case 0: y++; break; case 1: y--; break; case 2: y += 2; break; case 3: y -= 2; break; case 4: y += 3; break; } } } var x3 = performance.now(); // Results. console.log("TIME 1: " + (x2 - x1)); console.log("TIME 2: " + (x3 - x2)); Output TIME 1 (2019): 102.239 TIME 2: 93.890

Benchmark, fall-through. How does fall-through affect switch performance? Sometimes we can add duplicate statements to cases to avoid fall-through.

Version 1: The first version of the code omits the "break" in case 0, so that when case 0 is reached, case 1 is also reached.

Version 2: This code just duplicates the increment statements in case 0 to avoid fall-through.

Result: The 2 programs are almost the same speed in Chromium but when no fall-through occurs, slightly less time is used.

JavaScript program that times fall-through var count1 = 0; var count2 = 0; var x1 = performance.now(); // Version 1: this switch has a fall-through case. for (var i = 0; i < 10000000; i++) { for (var x = 0; x < 3; x++) { switch (x) { case 0: count1++; case 1: count2++; break; case 2: count1 = 0; count2 = 0; break; } } } var x2 = performance.now(); // Version 2: this switch has a break on all cases. for (var i = 0; i < 10000000; i++) { for (var x = 0; x < 3; x++) { switch (x) { case 0: count1++; count2++; break; case 1: count2++; break; case 2: count1 = 0; count2 = 0; break; } } } var x3 = performance.now(); // Results. console.log("TIME 1: " + (x2 - x1)); console.log("TIME 2: " + (x3 - x2)); Output TIME 1 (2019): 58.949 TIME 2: 58.459

Lookup tables. An object can be used instead of a switch statement to look up anonymous functions. We then call those functions. This appears to be slower than a switch statement.function Lookup

A summary. JavaScript optimization is a moving target. Browsers improve performance every few months. Switch on integers, though, could be a performance win that lasts.

The Dev Codes

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com

JavaScript switch Statement

Related Links:

.Net

Java

Related Links