Home / Questions / 1557
Accepted
Gepser Hoil
Asked: 2020-12-23 09:11:37 +0800 CST 2020-12-23 09:11:37 +0800 CST

Why doesn't the ternary operator work in javascript?

  • 772

I'm working on nodejs (although my question is valid for javascript in general) and I stumbled upon something I don't understand.

It is related to the ternary operator which , as I understand it, works like this:

var numero = 5;
var positivo = numero >= 0 ? true : false;

If the condition ( numero >=0) is true, the final result will be the first value that appears after that condition, in this case true. Otherwise, the final result will be the second value, in this case false.

So when printing:

console.log(positivo); //imprime true

If I change the variable numero, I can get a false value:

var numero = -1;
var positivo = numero >= 0 ? true : false; 
console.log(positivo); //imprime false

So far so good, but trying to isolate my problem I made this little code snippet:

var isValid = false;
var message;

if(isValid){
  message = 'es válida';
}else {
  message = 'no es válida';
}

console.log("Ésta condición " + message);
console.log("Ésta condición " + isValid ? 'es válida' : 'no es válida');

According to my logic, since in my code the variable isValidis false, both messages should print:

Ésta condición no es válida

However when I run my program the result is this:

Ésta condición no es válida
es válida

As you can see, when using the ternary operator it ignored for some reason that my variable isValidwas in false, does anyone have an idea why this is happening? And if it was an expected behavior (which I doubt) I'd like to know why.

javascript

4 Answers

  1. Best Answer

    You must use parentheses:

    console.log("Ésta condición " + (isValid ? 'es válida' : 'no es válida'));

    The operator +takes precedence. What the compiler understands is the following:

    console.log(("Ésta condición " + isValid) ? 'es válida' : 'no es válida');

    So print: 

    es valida

    Since "Ésta condición " + isValidit evaluates to true.

    By the way, this order of precedence applies to most languages ​​(I honestly don't know if there are any that are backwards), including JavaScript.

    This is the full JavaScript operator precedence table (see on MDN ).

    • 26

  2. The result is not exactly what you say. The actual result is:

    Ésta condición no es válida
es válida

    This is because the + operator takes precedence over ?. What you do is first concatenate "Ésta condición " + isValidand then check the result of that concatenation for the ternary operator condition. Since in javascript a non-empty string is true, it says "is valid".

    • 2

  3. Two things happen:

    • The first is that as they say in the previous comments, the operator +has more priority in that expression, so the first thing it does is add and then it applies the ternary operator.

    • JavaScript interprets that the sum of a non-empty string falseis the string itself.

      var a = 'string' + false; // da como resultado 'string'
    • 2

  4. In my opinion, Javascript has a problem with precedence and its parser itself... because it tries to make everything compile and if something doesn't fit, it discards it.

    Your code translates as:

    console.log <- detecta impresión a consola
"Ésta condición "<- detecta una cadena 
+ <- detecta un operador y lo resuelve como de concatenación procede a buscar elementos para hacer concatenación
isValid ? 'es válida' <- el parser detecta que hay una cadena y como el prototipo del operador de concatenación recibe cadena le concatena 'es valida'

    To solve this problem in an elegant way you can use string templatesthe following:

    var isValid = true;
console.log(`Ésta condición ${ isValid ? 'es válida' : 'no es válida'}`);
$("#salida").append(`Ésta condición ${ isValid ? 'es válida' : 'no es válida'}`);
$("#salida").append('<br>');
isValid = false;
console.log(`Ésta condición ${ isValid ? 'es válida' : 'no es válida'}`);
$("#salida").append(`Ésta condición ${ isValid ? 'es válida' : 'no es válida'}`);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="salida"></div>

    I hope someone finds it helpful.

    • -1