Animating one of three boxes based on a form value

Question

Is there a better way to do this without using if or case statements?

var val = ui.value,
$box = $('#message');
switch(true) {
  case (val > 50):
    $box.hide();
    animations.animateBox($box.html('you have chosen XN'));                        
    break;
  case (val < 50):
    $box.hide().delay(300);
    animations.animateBox($box.html('you have chosen VN'));
    break;
  default:
    $box.hide();
    animations.animateBox($box.html('you have chosen PN'));
}

Answer 1

This completely replaces your switch statement by using inline if statements conditional operator:

$box.hide().delay(val < 50 ? 300 : 0);
var s = val > 50 ? 'XN' : (val < 50 ? 'VN' : 'PN');
animations.animateBox($box.html('you have chosen ' + s));

the first line could be replaced by these two arguably more readable lines that omit the call to delay() function when not applicable:

$box.hide();
val < 50 && $box.delay(300);

Since @GregGuida pointed out that this code is less readable I suppose I can make it more readable by better formatting it. And I'll use the suggestion of replacing the first line with two of them:

$box.hide();

// only delay animation when value < 50
val < 50 && $box.delay(300);

var s = val > 50 ? 'XN' :
       (val < 50 ? 'VN' :
                   'PN');
// set HTML
animations.animateBox($box.html('you have chosen ' + s));

Same code but visually less chaotic (even without comments it would look less chaotic) and much much more readable. At least much more readable than OP's original code. That I'm sure of. Readability is of course an argumentative disposition. But I'll leave that to others.

Answer 2

You must not use conditional statements in combination with switch... that is THE DEVIL... because switch/case only interpretates values !

Infact, what you did there equals

switch( true ) {
    case true/false:
       break;
    case true/false:
       break;
    etc.
}

That is ohhh-so-wrong! Only use switch if you have well defined states/values which you want to check for. You totally should go with a if/else statement there.

if( val > 50 ) {
}
else if( val < 50 ) {
}
else { // val equals 50
}

Answer 3

You can try something like:

var val = ui.value,
    $box = $('#message');
    var choice = (val > 50) ? 'XN' : ((val < 50) ? 'VN' : 'PN');

    if(val < 50) {
        $box.hide().delay(300);
    } else {
        $box.hide();
    };

    animations.animateBox($box.html('you have chosen ' + choice));

You could remove the IF statement altogether if it weren't for the delay().

Answer 4

You can use the conditional operator of you want to avoid if and switch. You can reduce some repetiton in the code using a variable for the chosen product:

var val = ui.value,
var box = $('#message');
box.hide().delay(val < 50 ? 300 : 0);
var product =
  val > 50 ? 'XN' :
  val < 50 ? 'VN' :
  'PN';
animations.animateBox(box.html('you have chosen ' + product));

You should still consider if the code is more readable using if statements:

var val = ui.value,
var box = $('#message');
box.hide();
if (val < 50) {
  box.delay(300);
}
var product;
if (val > 50) {
  product = 'XN';
} else if (val < 50) {
  product = 'VN';
} else {
  product = 'PN';
}
animations.animateBox(box.html('you have chosen ' + product));

Answer 5

My suggestions:

1. use ternary operators;
2. use single char;
3. for prevent type casting, compare defined values with undefined;
4. use logical "and" (&&) instead of if.

Code snippet:

var val = ui.value,
    box = $('#message'),
    chr = 50 > val ? 'V' : (50 < val ? 'X' : 'P');
box.hide();
50 > val && box.delay(300);
animations.animateBox(box.html('You have chosen ' + chr + 'N'));