Switch Statement for String Matching in JavaScript

javascript

switch-statement

string-matching

regex-patterns

byNikita Barsukov·Mar 8, 2025

switch (yourString) {
  case 'option1': // Match 'option1'
    // Code to execute if the string is 'option1'
    break;
  case 'option2': // Match 'option2'
    // Code to execute if the string is 'option2'
    break;
  default: // String matched none of the options
    // Code to execute if the string matches neither 'option1' nor 'option2'
}

Directly compare yourString against different cases inside a switch. Break terminates the switch once a match is found. When there's no match, the default block is executed.

Breaking Down `switch` Pattern Matching

From `if/else` to Better Readability with `switch`

Using a switch can make conditions based on string matching clearer and more manageable:

const baseURL = location.host.toLowerCase(); // Ready for the party or a cat nap?

switch (baseURL) {
  case 'localhost':
  case '127.0.0.1': // Who needs || when you can just not break?
    console.log("We're in dev town now!"); // Our chariot awaits!
    break;
  case 'staging.website.com':
    console.log("You're in the staging lane, champ!"); // Just a few bugs here and there
    break;
  case 'production.website.com':
    console.log("Live and ready for the user guinea pigs!"); // Genuine snake oil
    break;
  default:
    console.log("This host is as mysterious as my cat's thoughts");
}

To ensure case-insensitive comparison lowercase the input string. No need for ||; just stack the cases for identical outcomes.

Using `Regex` for Expressive `switch` Statements

Extend your string pattern matching beyond literals with switch(true) and regex:

const urlPath = 'yourwebsite/pathway';

switch (true) { // Basically switch's cooler, older cousin
  case /^https:\/\/.+\.example\.com/.test(urlPath):
    console.log("Welcome to the rabbit hole!"); // Where the magic happens
    break;
  case /localhost|127\.0\.0\.1/.test(urlPath):
    console.log("Howdy, partner! You're home."); // Time for some localhost cooking!
    break;
  // add more patterns as you wish…
  default:
    console.log("Who knows where we are? Not me."); // Alright, where's the map again?
}

The handy .test() method checks if your string matches the regex pattern, while switch(true) checks if any of the case conditions ring true.

Upkeeping Your `switch` Case

Preempting `null` and `undefined` Drama

Steer clear of quirky null reference errors by using the ternary operator or optional chaining:

const observedURL = someConfig?.url || 'defaultUrl.com'; // Some people just want to watch the world burn
const completeURL = observedURL && `${observedURL}/endpoint`; // Turning NULLzilla into a fluffy kitten

Pre-`switch` Conditioning

Prioritize evaluating upstream conditions before diving into your switch:

const responseMsg = playerHasLives(player) ? 'Game continues' : 'Game Over';
if (responseMsg === 'Game Over') {
  return showMessage(responseMsg);
}
// Game's still afoot, let's see the player's move
switch (player.move) {
  // Game move conditions...
}

Navigating the `switch` Maze with Debugging

To inspect regex patterns, consider console.logging or sprinkle regex insights as comments:

const pattern = /(\d{3})-(\d{2})-(\d{4})/; // It's like a bank heist, but for data!
console.log('Pattern groups: Area code, Exchange code, Subscriber number'); // Three groups walk into a bar...

Visualization

Imagine a good JavaScript switch statement to be like an exclusive concert (🎉) where strings are the attendees:

Security Checking Code:

Switch (attendee) {
  Case "Alice":
    VIP access granted
    break
  Case "Bob":
    Show him to the bar
    break
  Case "Charlie":
    Guide him to the open mic area
    break
  Default:
    Politely show them the exit
}

Each case works like the security at the door, providing the right experience to every string!

"Alice" shows up: To the VIP room 🌟
"Bob" shows up: Cheers to a great night 🍹
"Charlie" shows up: The stage is yours 🎤
Unknown guest shows up: Not tonight, buddy 🚫

Your switch statement ensures every string — be it "Alice", "Bob" or an unknown guest — gets a tailored experience.

Dos and Don'ts with `switch`

Picking between `switch` and `if/else`

When in doubt, choose if/else for a complex, multifactorial situation but go with switch for a streamlined string matching scenario.

Performance Edition: `switch` vs `if/else`

On the racetrack of performance, switch often speeds past if/else, thanks to JavaScript engines using jump tables for a faster hitch-hike through our switch.

When to Unleash `Regex` within `switch`

Regex helps capture diverse URL formats or token patterns with grit:

switch (true) {
  case /admin/.test(urlPath): // Admins, show thy power!
    authenticateAdmin();
    break;
  case /user/.test(urlPath): // Users, have we got treasures for you!
    authenticateUser();
    break;
  // ... and so on
}