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.
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.
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));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.