Does

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

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

- condition ? value if the condition is true : value if the condition is false.

The use of and/or operators used to give

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

// 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);

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

// 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);

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]