javascript – How does this if/else work with "?" and ":"?


I'm studying JavaScript and I have questions about the different ways to do an if / else . For example, this:

foo ? foo : foo

How exactly does it work?


Other answers have already explained how the ternary conditional operator works, with good examples. It evaluates conditional expressions, similar to if :

var variavel = condicao ? valorSeTrue : valorSeFalse;

That is, if the condition (for example x > 5 ) is true, the variavel receives the valorSeTrue , and if it is false, the valorSeFalse .

A fundamental difference from if is that the ternary* is an operator, not a statement . It always results in a value, which is returned as shown in the example. There is no way to initialize a variable on a line with if precisely because it does not generate any value.

Therefore, the ternary conditional operator is more often used for assigning a value to a variable, while the common if is more used for flow control.

The advantage of the ternary for value assignment is clear: there is no need to repeat the variable name. For example, in this assignment with if we use 6 lines (including the variable declaration):

var x;
if(foo) {
    x = 10;
} else {
    x = 20;

Or, at best, two lines:

var x = 20;
if(foo) x = 10;

With the operator, you can declare, apply the conditional and assign in a single line:

var x = foo ? 10 : 20;

The ternary conditional operator is recommended for simple cases, as complex or nested conditions can make the code difficult to read:

var cargo = salario <= 1000 ? 'junior' : salario <= 5000 ? 'senior' : 'diretor';

If the return value options ( valorSeTrue valorSeFalse in my example at the beginning) are function calls, this operator can even be used for flow control:

// Cuidado: código abaixo pode ser péssima prática
// se você não souber o que está fazendo!
validaEmail(email) ? enviaEmail(email) : mostraErro();

In these cases, there are those who defend the exclusive use of this operator instead of if , especially when programming in functional style (where one could still capture the return of the enviaEmail or mostraErro functions, if necessary). I personally feel that each has its place, and in general I prefer to use ternary for assignments, and if for flow control.

(*) The ternary conditional operator is popularly known simply as "ternary", or "ternary operator". It is ternary because it has 3 arguments (the condition and the two possible values), but the quality of being conditional can be seen as more relevant since it deals with its function. In this answer, I chose to call it sometimes just "ternary", for simplicity, and sometimes by the full name, to reinforce it.

Scroll to Top