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 pact way of writing an if/else statement. But when I substitute the ternary operator in the code above with an if/else statement (currently mented 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.

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 pact way of writing an if/else statement. But when I substitute the ternary operator in the code above with an if/else statement (currently mented 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.

• javascript
• if-statement
• ternary-operator

Share Improve this question Follow asked Aug 13, 2014 at 0:13 MekongMekong 44911 gold badge77 silver badges2828 bronze badges 2

• 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/9b269zwx – Mike 'Pomax' Kamermans Commented Aug 13, 2014 at 0:17
• The ternary operator is not a pact way of if statement. Instead, it's an "inline" if/else expression. – Derek 朕會功夫 Commented Aug 13, 2014 at 1:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The ternary operator (more correctly known as the conditional operator) can replace a single if/else (only one parison clause), not an if/else-if (which has two parisons). 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 parisons, the if/else-if is a lot more readable, and should be preferred.

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.

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