Switch Statements & Pattern Matching

Why Do We Need switch Statements?

In the previous lesson, you learned how to use if, else if, and else to make decisions in your code. Those tools work perfectly for most situations, but sometimes your logic involves comparing a single value against many possible options. When you find yourself writing a long chain of else if statements that all compare the same variable to different values, the code becomes repetitive and hard to read. This is exactly where the switch statement shines.

The switch statement provides a cleaner, more structured way to handle multiple possible values for a single expression. Think of it like a restaurant menu -- instead of asking "Is it pizza? No? Is it pasta? No? Is it salad?" over and over, you look at the menu and jump directly to your choice. The switch statement works similarly: it evaluates an expression once and then jumps to the matching case.

Basic switch Syntax

The switch statement has a specific structure that you need to understand before using it. Let us examine every part of the syntax in detail.

switch (expression) {
    case value1:
        // Code to run if expression === value1
        break;
    case value2:
        // Code to run if expression === value2
        break;
    case value3:
        // Code to run if expression === value3
        break;
    default:
        // Code to run if no case matches
}

// Real example:
let dayNumber = 3;
let dayName;

switch (dayNumber) {
    case 1:
        dayName = 'Monday';
        break;
    case 2:
        dayName = 'Tuesday';
        break;
    case 3:
        dayName = 'Wednesday';
        break;
    case 4:
        dayName = 'Thursday';
        break;
    case 5:
        dayName = 'Friday';
        break;
    case 6:
        dayName = 'Saturday';
        break;
    case 7:
        dayName = 'Sunday';
        break;
    default:
        dayName = 'Invalid day number';
}

console.log(dayName); // "Wednesday"

Let us break down each component of the switch statement. The switch keyword starts the statement, followed by an expression in parentheses. This expression is evaluated once, and its result is compared against each case. Each case keyword is followed by a value and a colon. If the expression matches the case value using strict equality (===), the code after that case runs. The break keyword exits the switch statement -- without it, execution "falls through" to the next case (more on this shortly). The default clause is optional and runs when no case matches -- it is like the else in an if...else chain.

The case and break Keywords

The case and break keywords work together, but understanding each one individually is important. The case keyword defines a comparison point -- when the switch expression matches the case value, execution begins at that point. The break keyword tells JavaScript to exit the switch block entirely and continue with the code after the switch.

let fruit = 'apple';

switch (fruit) {
    case 'apple':
        console.log('Apples are $1.50 per pound.');
        console.log('They are great for pies!');
        break;  // Without this break, execution continues to the next case!

    case 'banana':
        console.log('Bananas are $0.75 per pound.');
        console.log('Rich in potassium!');
        break;

    case 'orange':
        console.log('Oranges are $2.00 per pound.');
        console.log('Great source of vitamin C!');
        break;

    default:
        console.log('Sorry, we do not carry ' + fruit + '.');
}
// Output:
// "Apples are $1.50 per pound."
// "They are great for pies!"

Each case can contain multiple lines of code. All the code between the case label and the break statement belongs to that case. You can have as many lines as you need -- variable declarations, function calls, loops, or even nested if statements inside a case.

let command = 'deploy';

switch (command) {
    case 'build':
        console.log('Starting build process...');
        console.log('Compiling source files...');
        console.log('Running tests...');
        console.log('Build complete!');
        break;

    case 'deploy':
        console.log('Starting deployment...');
        console.log('Uploading files to server...');
        console.log('Updating database...');
        console.log('Clearing cache...');
        console.log('Deployment successful!');
        break;

    case 'rollback':
        console.log('Starting rollback...');
        console.log('Restoring previous version...');
        console.log('Rollback complete!');
        break;

    default:
        console.log('Unknown command: ' + command);
        console.log('Available commands: build, deploy, rollback');
}
// Output:
// "Starting deployment..."
// "Uploading files to server..."
// "Updating database..."
// "Clearing cache..."
// "Deployment successful!"

Fall-Through Behavior: What Happens Without break

One of the most important (and most confusing) aspects of the switch statement is fall-through behavior. If you omit the break statement after a case, JavaScript does not stop at that case -- it continues executing the code in the next case, and the next, and so on until it hits a break or reaches the end of the switch block. This is called "falling through" because execution falls from one case into the next.

let color = 'red';

// BUG: Missing break statements!
switch (color) {
    case 'red':
        console.log('Red is the color of fire.');
        // No break! Falls through to next case.
    case 'blue':
        console.log('Blue is the color of the sky.');
        // No break! Falls through again.
    case 'green':
        console.log('Green is the color of nature.');
        break;
    default:
        console.log('Unknown color.');
}
// Output (ALL THREE lines print because of fall-through!):
// "Red is the color of fire."
// "Blue is the color of the sky."
// "Green is the color of nature."

However, fall-through can sometimes be used intentionally. When multiple cases should execute the same code, you can stack cases together without break statements between them. This is a legitimate and common pattern.

let month = 'March';
let season;

switch (month) {
    case 'December':
    case 'January':
    case 'February':
        season = 'Winter';
        break;

    case 'March':
    case 'April':
    case 'May':
        season = 'Spring';
        break;

    case 'June':
    case 'July':
    case 'August':
        season = 'Summer';
        break;

    case 'September':
    case 'October':
    case 'November':
        season = 'Autumn';
        break;

    default:
        season = 'Invalid month';
}

console.log(month + ' is in ' + season);
// Output: "March is in Spring"

The default Case

The default case serves as a catch-all for any value that does not match the defined cases. It is similar to the final else in an if...else if...else chain. While default is technically optional, you should almost always include one. It handles unexpected values gracefully and makes your code more robust. Without a default, if no case matches, the entire switch block does nothing -- which can lead to silent bugs that are difficult to track down.

// Example 1: Error handling with default
function getStatusMessage(statusCode) {
    let message;

    switch (statusCode) {
        case 200:
            message = 'OK -- Request successful.';
            break;
        case 201:
            message = 'Created -- Resource created successfully.';
            break;
        case 301:
            message = 'Moved Permanently -- Resource has a new URL.';
            break;
        case 400:
            message = 'Bad Request -- Check your request format.';
            break;
        case 401:
            message = 'Unauthorized -- Please log in.';
            break;
        case 403:
            message = 'Forbidden -- You do not have permission.';
            break;
        case 404:
            message = 'Not Found -- The resource does not exist.';
            break;
        case 500:
            message = 'Internal Server Error -- Something went wrong on the server.';
            break;
        case 503:
            message = 'Service Unavailable -- Server is temporarily down.';
            break;
        default:
            message = 'Unknown status code: ' + statusCode + '. Please check the documentation.';
    }

    return message;
}

console.log(getStatusMessage(200)); // "OK -- Request successful."
console.log(getStatusMessage(404)); // "Not Found -- The resource does not exist."
console.log(getStatusMessage(999)); // "Unknown status code: 999. Please check the documentation."

switch vs if-else: When to Use Which

Both switch and if...else if can handle multiple conditions, so how do you decide which one to use? The answer depends on what kind of comparison you are making. Here are clear guidelines for choosing between them.

Use switch when:

• You are comparing a single variable or expression against multiple specific values.
• You have three or more possible values to check.
• All comparisons are strict equality checks (===).
• You want clean, readable code for menu-style or state-based logic.

Use if...else if when:

• You need to check ranges of values (e.g., x > 10 && x < 20).
• You need to check different variables in different conditions.
• You need complex boolean expressions with && and ||.
• You have conditions that are not simple equality checks.

// GOOD use of switch -- comparing one variable to specific values
let role = 'editor';

switch (role) {
    case 'admin':
        console.log('Full access');
        break;
    case 'editor':
        console.log('Edit access');
        break;
    case 'viewer':
        console.log('Read-only access');
        break;
    default:
        console.log('No access');
}

// BAD use of switch -- ranges and complex conditions
// DO NOT do this:
// switch (true) {
//     case score >= 90: ...
//     case score >= 80: ...
// }

// GOOD use of if-else -- ranges and complex conditions
let score = 85;
let temperature = 30;
let isRaining = true;

if (score >= 90 && !isRaining) {
    console.log('Perfect day for outdoor celebration!');
} else if (score >= 80 && temperature < 35) {
    console.log('Good performance in comfortable weather.');
} else if (score >= 70) {
    console.log('Passing grade.');
} else {
    console.log('Needs improvement.');
}

// BAD use of if-else -- simple equality checks
// This would be cleaner as a switch:
let status = 'pending';
if (status === 'active') {
    console.log('Active');
} else if (status === 'pending') {
    console.log('Pending');
} else if (status === 'inactive') {
    console.log('Inactive');
} else if (status === 'banned') {
    console.log('Banned');
} else {
    console.log('Unknown');
}

Grouping Cases: Shared Logic for Multiple Values

One of the most powerful features of the switch statement is the ability to group multiple cases that should execute the same code. This is much cleaner than writing if (value === 'a' || value === 'b' || value === 'c'). By stacking case labels without break statements between them, you can elegantly handle multiple values with the same logic.

// Categorizing file extensions
function getFileCategory(extension) {
    let category;

    switch (extension.toLowerCase()) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
        case 'svg':
        case 'webp':
            category = 'Image';
            break;

        case 'mp4':
        case 'avi':
        case 'mkv':
        case 'mov':
        case 'webm':
            category = 'Video';
            break;

        case 'mp3':
        case 'wav':
        case 'flac':
        case 'ogg':
        case 'aac':
            category = 'Audio';
            break;

        case 'pdf':
        case 'doc':
        case 'docx':
        case 'txt':
        case 'rtf':
        case 'odt':
            category = 'Document';
            break;

        case 'html':
        case 'css':
        case 'js':
        case 'py':
        case 'java':
        case 'php':
            category = 'Code';
            break;

        case 'zip':
        case 'rar':
        case '7z':
        case 'tar':
        case 'gz':
            category = 'Archive';
            break;

        default:
            category = 'Unknown';
    }

    return category;
}

console.log(getFileCategory('PNG'));   // "Image"
console.log(getFileCategory('mp3'));   // "Audio"
console.log(getFileCategory('py'));    // "Code"
console.log(getFileCategory('xyz'));   // "Unknown"

// Keyboard event handler
function handleKeyPress(key) {
    switch (key) {
        // Movement keys -- all share similar logic but with different directions
        case 'w':
        case 'ArrowUp':
            console.log('Moving UP');
            break;

        case 's':
        case 'ArrowDown':
            console.log('Moving DOWN');
            break;

        case 'a':
        case 'ArrowLeft':
            console.log('Moving LEFT');
            break;

        case 'd':
        case 'ArrowRight':
            console.log('Moving RIGHT');
            break;

        // Action keys
        case ' ':
        case 'Enter':
            console.log('Action/Select');
            break;

        case 'Escape':
            console.log('Pause/Menu');
            break;

        default:
            console.log('Unbound key: ' + key);
    }
}

handleKeyPress('ArrowUp');   // "Moving UP"
handleKeyPress('w');          // "Moving UP"
handleKeyPress('Escape');     // "Pause/Menu"
handleKeyPress('x');          // "Unbound key: x"

switch with Expressions

The expression inside switch() can be any valid JavaScript expression -- it does not have to be a simple variable. You can use method calls, computed values, or any expression that evaluates to a value. Similarly, case values can be expressions too, though using simple literal values is more common and more readable.

// Using a method call as the switch expression
let input = '  Hello World  ';

switch (input.trim().toLowerCase()) {
    case 'hello world':
        console.log('Standard greeting detected.');
        break;
    case 'goodbye':
        console.log('Farewell message detected.');
        break;
    case 'help':
        console.log('Help request detected.');
        break;
    default:
        console.log('Unrecognized input: ' + input.trim());
}
// Output: "Standard greeting detected."

// Using computed expressions
let hour = new Date().getHours();
let period;

switch (true) {
    // NOTE: switch(true) is generally discouraged,
    // but shown here for educational purposes.
    // Prefer if-else for range checks.
}

// Better approach for time-based logic using if-else:
if (hour >= 5 && hour < 12) {
    period = 'Morning';
} else if (hour >= 12 && hour < 17) {
    period = 'Afternoon';
} else if (hour >= 17 && hour < 21) {
    period = 'Evening';
} else {
    period = 'Night';
}
console.log('Current period: ' + period);

// Routing based on URL path
function handleRoute(url) {
    // Extract the first segment of the URL path
    let path = url.split('/')[1] || 'home';

    switch (path) {
        case 'home':
        case '':
            console.log('Rendering home page.');
            break;

        case 'about':
            console.log('Rendering about page.');
            break;

        case 'products':
            console.log('Rendering products catalog.');
            break;

        case 'contact':
            console.log('Rendering contact form.');
            break;

        case 'admin':
            console.log('Rendering admin dashboard.');
            break;

        default:
            console.log('404: Page not found for path "/" + path + "/".');
    }
}

handleRoute('/about');     // "Rendering about page."
handleRoute('/products');  // "Rendering products catalog."
handleRoute('/unknown');   // "404: Page not found for path /unknown/."

switch with return in Functions

When using switch inside a function, you can use return instead of break to exit both the switch and the function at once. This is a clean pattern because it eliminates the need for a result variable -- you simply return the value directly from each case. Since return immediately exits the function, there is no risk of fall-through.

// Using return instead of break
function getDayType(day) {
    switch (day.toLowerCase()) {
        case 'monday':
        case 'tuesday':
        case 'wednesday':
        case 'thursday':
        case 'friday':
            return 'Weekday';

        case 'saturday':
        case 'sunday':
            return 'Weekend';

        default:
            return 'Invalid day: ' + day;
    }
    // No code after switch needed -- all paths return
}

console.log(getDayType('Monday'));    // "Weekday"
console.log(getDayType('Saturday'));  // "Weekend"
console.log(getDayType('Funday'));    // "Invalid day: Funday"

// More complex example: configuration factory
function createDatabaseConfig(environment) {
    switch (environment) {
        case 'development':
            return {
                host: 'localhost',
                port: 5432,
                database: 'myapp_dev',
                debug: true,
                pool: { min: 1, max: 5 }
            };

        case 'testing':
            return {
                host: 'localhost',
                port: 5432,
                database: 'myapp_test',
                debug: true,
                pool: { min: 1, max: 3 }
            };

        case 'staging':
            return {
                host: 'staging-db.example.com',
                port: 5432,
                database: 'myapp_staging',
                debug: false,
                pool: { min: 5, max: 20 }
            };

        case 'production':
            return {
                host: 'prod-db.example.com',
                port: 5432,
                database: 'myapp_prod',
                debug: false,
                pool: { min: 10, max: 50 }
            };

        default:
            throw new Error('Unknown environment: ' + environment);
    }
}

let config = createDatabaseConfig('development');
console.log(config.host);     // "localhost"
console.log(config.database); // "myapp_dev"

Real-World Example: Menu Navigation System

Menu navigation is a classic use case for switch statements. Applications often need to respond to different menu options selected by users. Here is a comprehensive example that simulates a command-line menu system.

function handleMenuSelection(menuChoice) {
    console.log('\n=== Menu Selection: ' + menuChoice + ' ===');

    switch (menuChoice) {
        case '1':
        case 'profile':
            console.log('Opening User Profile...');
            console.log('Name: John Doe');
            console.log('Email: john@example.com');
            console.log('Member since: January 2024');
            return { page: 'profile', status: 'success' };

        case '2':
        case 'settings':
            console.log('Opening Settings...');
            console.log('Available settings:');
            console.log('  - Appearance (theme, font size)');
            console.log('  - Notifications (email, push)');
            console.log('  - Privacy (visibility, data sharing)');
            console.log('  - Security (password, 2FA)');
            return { page: 'settings', status: 'success' };

        case '3':
        case 'messages':
            console.log('Opening Messages...');
            console.log('You have 5 unread messages.');
            console.log('Latest: "Meeting tomorrow at 10am" from Alice');
            return { page: 'messages', status: 'success', unread: 5 };

        case '4':
        case 'notifications':
            console.log('Opening Notifications...');
            console.log('3 new notifications:');
            console.log('  1. System update available');
            console.log('  2. Your post received 10 likes');
            console.log('  3. New follower: @webdev_sarah');
            return { page: 'notifications', status: 'success', count: 3 };

        case '5':
        case 'help':
            console.log('Help Center');
            console.log('  Type "1" or "profile" to view your profile');
            console.log('  Type "2" or "settings" to open settings');
            console.log('  Type "3" or "messages" to view messages');
            console.log('  Type "4" or "notifications" to see notifications');
            console.log('  Type "6" or "logout" to sign out');
            return { page: 'help', status: 'success' };

        case '6':
        case 'logout':
            console.log('Logging out...');
            console.log('Thank you for using our application!');
            console.log('You have been safely signed out.');
            return { page: 'logout', status: 'success' };

        default:
            console.log('Invalid menu option: "' + menuChoice + '"');
            console.log('Please enter a number 1-6 or a menu name.');
            console.log('Type "5" or "help" for available options.');
            return { page: null, status: 'error', message: 'Invalid option' };
    }
}

// Testing the menu system
handleMenuSelection('1');
handleMenuSelection('settings');
handleMenuSelection('messages');
handleMenuSelection('invalid');

Real-World Example: Status Handling

Applications constantly need to respond to different status values -- from HTTP responses to order tracking to user account states. The switch statement is ideal for mapping status codes to actions or messages. Here is a comprehensive example that handles order status changes with appropriate actions for each transition.

function handleOrderStatus(order) {
    let notification = {
        orderId: order.id,
        timestamp: new Date().toISOString()
    };

    switch (order.status) {
        case 'pending':
            notification.title = 'Order Received';
            notification.message = 'Your order #' + order.id +
                ' has been received and is awaiting confirmation.';
            notification.action = 'Please wait while we verify your payment.';
            notification.icon = 'clock';
            notification.color = 'orange';
            break;

        case 'confirmed':
            notification.title = 'Order Confirmed';
            notification.message = 'Your order #' + order.id +
                ' has been confirmed!';
            notification.action = 'Your items are being prepared for shipment.';
            notification.icon = 'check-circle';
            notification.color = 'blue';
            break;

        case 'processing':
            notification.title = 'Order Processing';
            notification.message = 'Your order #' + order.id +
                ' is being prepared.';
            notification.action = 'Estimated processing time: 1-2 business days.';
            notification.icon = 'gear';
            notification.color = 'blue';
            break;

        case 'shipped':
            notification.title = 'Order Shipped!';
            notification.message = 'Your order #' + order.id +
                ' is on its way!';
            notification.action = 'Track your package with tracking number: ' +
                (order.trackingNumber || 'pending');
            notification.icon = 'truck';
            notification.color = 'purple';
            break;

        case 'out_for_delivery':
            notification.title = 'Out for Delivery';
            notification.message = 'Your order #' + order.id +
                ' will arrive today!';
            notification.action = 'Make sure someone is available to receive the package.';
            notification.icon = 'map-pin';
            notification.color = 'green';
            break;

        case 'delivered':
            notification.title = 'Order Delivered';
            notification.message = 'Your order #' + order.id +
                ' has been delivered successfully!';
            notification.action = 'We hope you enjoy your purchase. Leave a review!';
            notification.icon = 'package';
            notification.color = 'green';
            break;

        case 'cancelled':
            notification.title = 'Order Cancelled';
            notification.message = 'Your order #' + order.id +
                ' has been cancelled.';
            notification.action = 'A refund will be processed within 5-7 business days.';
            notification.icon = 'x-circle';
            notification.color = 'red';
            break;

        case 'returned':
            notification.title = 'Return Processed';
            notification.message = 'Your return for order #' + order.id +
                ' has been processed.';
            notification.action = 'Refund will appear in your account within 3-5 business days.';
            notification.icon = 'rotate-ccw';
            notification.color = 'orange';
            break;

        default:
            notification.title = 'Status Update';
            notification.message = 'Order #' + order.id +
                ' status changed to: ' + order.status;
            notification.action = 'Contact support if you have questions.';
            notification.icon = 'info';
            notification.color = 'gray';
    }

    console.log('[Notification] ' + notification.title);
    console.log(notification.message);
    console.log('Action: ' + notification.action);

    return notification;
}

// Testing
handleOrderStatus({ id: 'ORD-2024-001', status: 'shipped', trackingNumber: 'TRK-9876543' });
handleOrderStatus({ id: 'ORD-2024-002', status: 'delivered' });
handleOrderStatus({ id: 'ORD-2024-003', status: 'cancelled' });

Real-World Example: Calculator

Building a calculator is a classic programming exercise that demonstrates switch statements perfectly. Each mathematical operation is a distinct case, and the switch structure makes it easy to add new operations. Here is a full-featured calculator implementation.

function calculate(num1, operator, num2) {
    // Input validation
    if (typeof num1 !== 'number' || typeof num2 !== 'number') {
        return { error: true, message: 'Both operands must be numbers.' };
    }

    if (isNaN(num1) || isNaN(num2)) {
        return { error: true, message: 'NaN is not a valid operand.' };
    }

    let result;
    let operationName;

    switch (operator) {
        case '+':
        case 'add':
            result = num1 + num2;
            operationName = 'Addition';
            break;

        case '-':
        case 'subtract':
            result = num1 - num2;
            operationName = 'Subtraction';
            break;

        case '*':
        case 'x':
        case 'multiply':
            result = num1 * num2;
            operationName = 'Multiplication';
            break;

        case '/':
        case 'divide':
            if (num2 === 0) {
                return {
                    error: true,
                    message: 'Division by zero is not allowed.'
                };
            }
            result = num1 / num2;
            operationName = 'Division';
            break;

        case '%':
        case 'mod':
        case 'modulo':
            if (num2 === 0) {
                return {
                    error: true,
                    message: 'Modulo by zero is not allowed.'
                };
            }
            result = num1 % num2;
            operationName = 'Modulo';
            break;

        case '**':
        case 'pow':
        case 'power':
            result = num1 ** num2;
            operationName = 'Exponentiation';
            break;

        default:
            return {
                error: true,
                message: 'Unknown operator: "' + operator + '". Valid operators: +, -, *, /, %, **'
            };
    }

    // Format result for display
    let displayResult = Number.isInteger(result) ? result : parseFloat(result.toFixed(10));

    return {
        error: false,
        operation: operationName,
        expression: num1 + ' ' + operator + ' ' + num2,
        result: displayResult,
        message: num1 + ' ' + operator + ' ' + num2 + ' = ' + displayResult
    };
}

// Testing all operations
console.log(calculate(10, '+', 5));      // 15
console.log(calculate(10, '-', 3));      // 7
console.log(calculate(6, '*', 7));       // 42
console.log(calculate(20, '/', 4));      // 5
console.log(calculate(17, '%', 5));      // 2
console.log(calculate(2, '**', 10));     // 1024
console.log(calculate(10, '/', 0));      // Error: Division by zero
console.log(calculate(5, 'multiply', 3)); // 15 (using word operator)
console.log(calculate(5, '@', 3));       // Error: Unknown operator

Advanced Pattern: Object Lookup as an Alternative to switch

In many cases, you can replace a switch statement with an object lookup. This pattern is more concise and can be more performant for large numbers of cases. It is especially useful when your switch simply maps values to other values without complex logic.

// Using switch
function getColorHexSwitch(colorName) {
    switch (colorName.toLowerCase()) {
        case 'red':     return '#FF0000';
        case 'green':   return '#00FF00';
        case 'blue':    return '#0000FF';
        case 'yellow':  return '#FFFF00';
        case 'purple':  return '#800080';
        case 'orange':  return '#FFA500';
        case 'black':   return '#000000';
        case 'white':   return '#FFFFFF';
        default:        return null;
    }
}

// Using object lookup (cleaner for simple mappings)
function getColorHexLookup(colorName) {
    let colorMap = {
        'red':    '#FF0000',
        'green':  '#00FF00',
        'blue':   '#0000FF',
        'yellow': '#FFFF00',
        'purple': '#800080',
        'orange': '#FFA500',
        'black':  '#000000',
        'white':  '#FFFFFF'
    };

    return colorMap[colorName.toLowerCase()] || null;
}

// Both produce the same result
console.log(getColorHexSwitch('blue'));   // "#0000FF"
console.log(getColorHexLookup('blue'));   // "#0000FF"

// Object lookup with functions (for cases that need logic)
let operationsMap = {
    '+': function(a, b) { return a + b; },
    '-': function(a, b) { return a - b; },
    '*': function(a, b) { return a * b; },
    '/': function(a, b) { return b !== 0 ? a / b : 'Error: Division by zero'; }
};

function quickCalc(a, op, b) {
    let operation = operationsMap[op];

    if (!operation) {
        return 'Unknown operator: ' + op;
    }

    return operation(a, b);
}

console.log(quickCalc(10, '+', 5));  // 15
console.log(quickCalc(10, '/', 0));  // "Error: Division by zero"
console.log(quickCalc(10, '@', 5));  // "Unknown operator: @"

Common Mistakes and How to Avoid Them

Understanding common switch statement mistakes will help you write more reliable code. Here are the most frequent errors developers make and how to prevent them.

// MISTAKE 1: Type mismatch (switch uses ===)
let userInput = '5'; // String from a form field

switch (userInput) {
    case 5: // Number 5, not string "5"!
        console.log('This will NOT match!');
        break;
    case '5': // String "5" -- this matches
        console.log('This WILL match.');
        break;
}

// FIX: Convert types explicitly
let numericInput = Number(userInput);
switch (numericInput) {
    case 5:
        console.log('Now it matches!');
        break;
}

// MISTAKE 2: Forgetting break (unintentional fall-through)
let size = 'medium';
let price;

// BUG: missing breaks
switch (size) {
    case 'small':
        price = 5;
    case 'medium':
        price = 8;
    case 'large':
        price = 12;
}
console.log(price); // 12! NOT 8, because fall-through assigns 12 last

// FIX: Always use break or return
switch (size) {
    case 'small':
        price = 5;
        break;
    case 'medium':
        price = 8;
        break;
    case 'large':
        price = 12;
        break;
}
console.log(price); // 8 -- correct!

// MISTAKE 3: Declaring variables without block scope
let action = 'create';

// This can cause issues in some cases:
switch (action) {
    case 'create':
        let message = 'Created!'; // This variable is accessible in other cases!
        console.log(message);
        break;
    // case 'update':
    //     let message = 'Updated!'; // ERROR: Cannot redeclare variable
    //     break;
}

// FIX: Wrap cases in blocks to create proper scope
switch (action) {
    case 'create': {
        let message = 'Created!';
        console.log(message);
        break;
    }
    case 'update': {
        let message = 'Updated!'; // No conflict -- different block scope
        console.log(message);
        break;
    }
}

// MISTAKE 4: Missing default case
let status = 'archived'; // An unexpected value

switch (status) {
    case 'active':
        console.log('Active');
        break;
    case 'inactive':
        console.log('Inactive');
        break;
    // No default -- "archived" silently does nothing!
}

// FIX: Always include a default case
switch (status) {
    case 'active':
        console.log('Active');
        break;
    case 'inactive':
        console.log('Inactive');
        break;
    default:
        console.log('Unexpected status: ' + status);
        // Log, throw error, or handle gracefully
}

Best Practices for switch Statements

Following these best practices will help you write clean, maintainable, and bug-free switch statements every time.

// 1. ALWAYS include break or return in every case
function goodSwitch(value) {
    switch (value) {
        case 'a': return 'Alpha';
        case 'b': return 'Beta';
        default:  return 'Unknown';
    }
}

// 2. ALWAYS include a default case
function withDefault(status) {
    switch (status) {
        case 'ok':
            return 200;
        case 'not_found':
            return 404;
        default:
            console.warn('Unexpected status: ' + status);
            return 500;
    }
}

// 3. Comment intentional fall-through
function daysInMonth(month) {
    switch (month) {
        case 2:
            return 28; // Simplified, ignoring leap years

        case 4:
        case 6:
        case 9:
        case 11:
            // Intentional fall-through: these months all have 30 days
            return 30;

        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
            // Intentional fall-through: these months all have 31 days
            return 31;

        default:
            return -1;
    }
}

// 4. Use block scope {} when declaring variables in cases
function processItem(type) {
    switch (type) {
        case 'book': {
            let discount = 0.1;
            let tax = 0.05;
            return { discount, tax, category: 'literature' };
        }
        case 'electronics': {
            let discount = 0.05;
            let tax = 0.15;
            return { discount, tax, category: 'tech' };
        }
        default: {
            let discount = 0;
            let tax = 0.1;
            return { discount, tax, category: 'general' };
        }
    }
}

// 5. Consider object lookup for simple value mappings
let emojiMap = {
    'happy': ':-)',
    'sad': ':-(',
    'surprised': ':-O',
    'angry': '>:-(',
    'cool': 'B-)'
};

function getEmoji(mood) {
    return emojiMap[mood] || ':-|';
}

// 6. Keep cases short -- extract complex logic into functions
function handleEvent(event) {
    switch (event.type) {
        case 'click':
            handleClick(event);
            break;
        case 'submit':
            handleSubmit(event);
            break;
        case 'keypress':
            handleKeyPress(event);
            break;
        default:
            logUnknownEvent(event);
    }
}