JS ternary operator vs if/else

Question

Trying to get a better understanding of JavaScript. I've checked out a few similar questions answered on this forum but I'm still confused on this point.

I've got some code off the web that toggles the visibility of a modal window (div) and an overlay (div) - (I know this might be better done with jQuery but I wanted to understand JS first):

function overlay() {
    el = document.getElementById("overlay");

    /* TERNARY */
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";

    /*
    if(el.style.visibility == "visible"){
        el.style.visibility = "hidden";
    }else if(el.style.visibility == "hidden"){
        el.style.visibility = "visible";
    }

   */   
}

I thought that the ternary operator was just a more compact way of writing an if/else statement. But when I substitute the ternary operator in the code above with an if/else statement (currently commented out in code), the code doesn't work.

I've probably got something wrong but I can't figure out what? Could someone help?

Thanks.

your code works fine, it's your assumption about what the initial value is that is incorrect (aks yourself why the value should be 'visible' or 'hidden', or anything even) - jsfiddle.net/9b269zwx — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Aug 13, 2014 at 0:17
The ternary operator is not a compact way of if statement. Instead, it's an "inline" if/else expression. — Derek 朕會功夫
– Derek 朕會功夫, Commented Aug 13, 2014 at 1:13

nbrooks · Accepted Answer · 2014-08-13 00:38:13Z

4

The ternary operator (more correctly known as the conditional operator) can replace a single if/else (only one comparison clause), not an if/else-if (which has two comparisons). So

var d = (a ? b : c);

is equivalent to:

var d;

if (a) {
    d = b;
} else {
    d = c;
}

So in your case, the if/else equivalent to your conditional operator would be:

if (el.style.visibility == "visible") {
    el.style.visibility = "hidden";
} else {
    el.style.visibility = "visible";
}

Likewise, nesting two conditional operators can yield an equivalent expression to your if/else-if:

el.style.visibility = (el.style.visibility == "visible") ? 
    "hidden" : (el.style.visibility == "hidden") ? 
    "visible" : el.style.visibility;

Obviously in this case, if you're doing two comparisons, the if/else-if is a lot more readable, and should be preferred.

edited Aug 13, 2014 at 0:38

answered Aug 13, 2014 at 0:17

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jeremy J Starcher Over a year ago

While correct, please, for the love of the coder who will work on the code next -- don't ever nest the ternary operator!

nbrooks Over a year ago

@Jeremy Agreed, just pointing it out for the sake of symmetry. Note the part about the lack of readability :)

Mekong Over a year ago

Thanks for your help. All sorted!

Jeremy J Starcher · Accepted Answer · 2014-08-13 00:17:12Z

These two blocks of code are not actually the same.

Checks for the values of 'visible' or anything else

/* TERNARY */
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";

Checks for the values of 'visible' or 'hidden'

if(el.style.visibility == "visible"){
    el.style.visibility = "hidden";
}else if(el.style.visibility == "hidden"){
    el.style.visibility = "visible";
}

There is a third value you didn't check for

style.visibility may also be "", which indicates the default value.

Free hint of the day: If it ever looks like a conditional isn't working, check use the debugger or console.log to verify the values are what you expect. 99.99% of the time, you'll find the values aren't what you think they should be.

pixel 67 · Accepted Answer · 2018-02-24 15:51:55Z

I thought I would add another example of the ternary in action when a function returns another function. Instead of the if/else if:

function greetCurried (greeting) {
  return function (name) {
    if (typeof(greeting) !== 'string') {
      return ('Greetings!');
    } else if (typeof(name) !== 'string') {
      return (greeting)
    }
    return (`${greeting}, ${name}`);
  }
}

You cand do a ternary:

const greetCurried = (greeting) => {
  typeof(greeting) != 'string' ? 'Greetings' : greeting
    return (name) => {
      return typeof(name) != 'string' ? greeting : `${greeting}, ${name}`
    }
  return
}

const greetHello = greetCurried('Hello');

console.log(greetHello('Hedi'));

console.log(greetHello(5));

Collectives™ on Stack Overflow

JS ternary operator vs if/else

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related