Switch statement for greater-than/less-than

javascript

performance

best-practices

functions

byAlex Kataev·Oct 19, 2024

let x = 25;
// Ternary Operator approach - quick, efficient, no-nonsense approach
let result = x > 20 ? 'Greater than 20, if you know what I mean *wink wink*' : 
             x > 10 ? 'Greater than 10, we are getting there!' :
             '10 or less. Well, good things come in small packages!';
console.log(result);

Ternary operators provide a snappy and concise way to handle multiple greater-than/less-than cases. It merges checks into a clear structure, acting as a more compact, dare I say stylish, alternative to if-else statements.

if vs switch: Speed matters

If-statements usually run faster and more efficiently than switch statements when dealing with value ranges. But hey, some prefer style over speed, which makes a switch statement easier on the eyes for some. Feel free to pit both methods in a performance test on multiple browsers. But remember, browsers evolve, like Chrome's performance boost from 2012 to 2021 - talk about leveling-up!

let value = 75;
switch (true) { // 'true' is out here fighting for what's right!
    case (value > 50):
        console.log('Greater than 50 - that escalated quickly!');
        break;
    case (value > 20):
        console.log('Greater than 20 - we are making progress!');
        break;
    default:
        console.log('20 or less - slow and steady wins the race!');
}

Order your cases wisely, as they're evaluated top-down, or else you'll miss out on what's rightfully yours!

Optimizing a switch: Power-up guide

Switch statements might not always be the fastest, but with some modifications, they might just give those if-statements a run for their money:

Direct Comparisons for speed

No need for complex expressions or arrays here; direct immediate comparators are the Fast and Furious of comparators!

Strategic case placement

List those common cases right at the beginning, hitting them faster and avoiding unnecessary evaluations- efficiency is our BFF!

Custom objects for loop evaluation

Turn the battlefield in your favor with a custom object that contains your criteria and functions. Switch-case who?

let ranges = {
    range1: () => x > 20, // "Above 20, to infinity and beyond!"
    range2: () => x > 10, // "Above 10, halfway there!"
    default: () => true // "The dreamer! Catch-all for the rest!"
};

for (let key in ranges) {
    if (ranges[key]()) {
        console.log(`Matched ${key}`);
        break;
    }
}

Ranges and steps

With overlapping conditions hitting you like Thanos' snap, it's best to check the upper limit and use Math.floor() for maintaining law and order in stepping ranges. Defining functions for each case will be a helping hand when maintaining code:

// Condition check helper function, a programmer's best friend!
function isInRange(value, min, max) { return value >= min && value < max; }

// Just drop the function in your conditions and you're good to go!
if (isInRange(value, 0, 10)) {
    // handle 0-10 - Small is the new big!
} else if (isInRange(value, 10, 20)) {
    // handle 10-20 - Packin' a punch at the middle!
}

Traffic signal visualization: Because pictures do speak louder than words!

Imagine each condition as a traffic signal light:

Green Light (🟢):
- case value > 100: Full throttle!
Yellow Light (🟡):
- case value > 50 && value <= 100: Slow down, look around!
Red Light (🔴):
- case value <= 50: Full stop! Lower values reign here.
Default (⏺️):
- Nothing matches? Proceed with care, it's a wild card!

Additional switch techniques

For those seeking to go beyond conventional means, here are some unique switch patterns:

Nested ternary operators

Er, ever considered replacing that bulky switch-case with something more stylish?

Lookup tables

An object or Map takes up the role of a potential lookup table, offering a contemporary upgrade to switch-case blocks.

Introducing ternaries within switch

Sometimes, a simple ternary operator within a switch case can provide a clearer, prettier picture!

switch (true) {
    case (value > 50):
        console.log(value > 75 ? 'Greater than 75 - Oh, that\'s high!' : '51-75 - Above average, eh?');
        break;
    // other conditions
}