thomasfrank.se

3 ways 2 say if

August 25, 2006

Does "if… else if… else if… else" sound familiar to you?
I bet it does – it is probably one of the most used structures in programming. But did you know that there are at least two alternatives to it in JavaScript?
Let us take a closer look at the conditional operator and the inner workings of the logical and/or operators.
(I’m not counting the case - switch syntax here, if you want to know about alternatives to case -- wait for my next article.)

If…else structures

In the example below we randomly set the variable r to 0 or 1. We then set the variables a, b and c to "small" if r is 0 and "big" if r has any other value. We do this using a tradional if-else statement for a, JavaScript's conditional operator for b and logical and/or operators for c.
// Set r to 0 or 1
var r= Math.floor(2*Math.random())

// Set a, b and c to "small" if r==0 an else set them to "big"
// using three different techniques
  
// Method 1: If else
var a; if (r==0){a = "small"} else {a = "big"};

// Method 2: Conditional operator
var b = r==0 ? "small" : "big";

// Method 3: And/or operators
var c = r==0 && "small" || "big";

// Check the values of our variables
alert(r+" "+a+" "+b+" "+c);


The conditional statement used to give b its value is pretty straight forward:
The use of and/or operators used to give c its value requires som explanation:

If…else if…else structures

Else if is just what it sounds like - else and if in conjunction. Therefore it is easy to extend our example to cover else if as well:
// Set r to 0,1,2 or 3
var r= Math.floor(4*Math.random())

// Set a, b and c to "nada","small","big" and "huge" 
// depending on the value or r using three different techniques
 
// Method 1: If.. else if... else
var a;
if (r==0){a="nada"}
else if (r==1){a="small"}
else if (r==2){a="big"}
else {a="huge"};

// Method 2: Conditional operators
var b =
r==0 ? "nada"
: r==1 ? "small"
: r==2 ? "big"
: "huge";

// Method 3: And/or operators
var c = 
r==0 && "nada" 
|| r==1 && "small"
|| r==2 && "big"
|| "huge";

// Check the values of our variables
alert(r+" "+a+" "+b+" "+c);

And the winner is

In the example above it is almost a tie between method 2 and 3 -- they are both considerably more compact than method 1, our traditional if...else if...else, but the conditional operator wins because logical and/or operators - && and || - take two characters each to write.

What about calling functions?

Fine, you say, you've proven that we can set the value of a variable using alternatives to if...else. But what if we need to do something else - like calling a function? Easy:
// Set r to 0,1,2 or 3
var r= Math.floor(4*Math.random())

// The global variable x and our four functions
var x="";
nada=function(){x+="Nada! "};
small=function(){x+="Small! "};
big=function(){x+="Big! "};
huge=function(){x+="Huge! "};

// Call a specific function depending on the value of r 
// using three different techniques
 
// Method 1: If.. else if... else
if (r==0){nada()}
else if (r==1){small()}
else if (r==2){big()}
else {huge()};

// Method 2: Conditional operators
r==0 ? nada()
: r==1 ? small()
: r==2 ? big()
: huge();

// Method 3: And/or operators
r==0 && (nada() || true) 
|| r==1 && (small() || true)
|| r==2 && (big() || true)
|| huge();

// Check the values of our variables
alert(r+" "+x);


As you see the way we use the conditional operator hasn't changed from our previous example, but the and/or example looks a little bit different. That is because I'm not taking for granted that our functions return true (in fact they don't) but I only want one function to be called. Thus I have to make sure that the result we get after a function call is always true - so that JavaScript doesn't continue checking the rest of the logical expression, thereby calling more functions. I do this by grouping the function call with "|| true" inside a parenthesis.

And the winner is

Method 2 - the conditional operator gives us the most compact code.

What about just executing some code?

What if we only want to execute som code then? To make this work with our alternative techniques we have to enclose the code in anonymous functions:
// Set r to 0,1,2 or 3
var r= Math.floor(4*Math.random())

// The global variable x
var x="";

// Executing different code depending on the value of r 
// using three different techniques
 
// Method 1: If.. else if... else
if (r==0){x+="Nada! "}
else if (r==1){x+="Small! "}
else if (r==2){x+="Big! "}
else {x+="Huge! "};

// Method 2: Conditional operators
r==0 ? function(){x+="Nada! "}()
: r==1 ? function(){x+="Small! "}()
: r==2 ? function(){x+="Big! "}()
: function(){x+="Huge! "}();

// Method 3: And/or operators
r==0 && (function(){x+="Nada! "}() || true) 
|| r==1 && (function(){x+="Small! "}() || true)
|| r==2 && (function(){x+="Big! "}() || true)
|| function(){x+="Huge! "}();

// Check the values of our variables
alert(r+" "+x);

And the winner is

In this case - our traditional if...else if...else - still gives us the most compact code..

Conclusion / overall winner

Some think code written with the conditional operator is hard to understand, but in fact (once you have learned the syntax thorougly) it often gives you a cleaner, more compact syntax than if..else if...else.
The use of just and/or operators seldom gives us the most compact code or easiest syntax (except in this case), but it is useful to be aware of.
[comments]