# 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:
• condition ? value if the condition is true : value if the condition is false.

The use of and/or operators used to give c its value requires som explanation:
• When you use the logical and operator, &&, conditions only get checked until one of them is false.
• When you use the logical or operator, || , conditions only get checked until one of them is true.
• The logical and operator take precedence over the logical or operator - this is why we don't need any parentheses in our example.
• The result of a logical expression is the value of the last condition that was checked -- it can return other values than just true or false.

## 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;
else if (r==1){a="small"}
else if (r==2){a="big"}
else {a="huge"};

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

// Method 3: And/or operators
var c =
|| 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="";
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
else if (r==1){small()}
else if (r==2){big()}
else {huge()};

// Method 2: Conditional operators
: 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

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
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