JS Ternary functions with multiple conditions?

Question

I have been using a ternary operator in JavaScript to modify the value of an object based on user input. I have the following code, which runs as it should:

var inputOneAns = inputOne == "Yes" ? "517" : "518";

As you can see, I am assigning a numeric string value to inputOneAnswhether a user has inputed "Yes" or "No". However, there may be a case that a user has not selected a value (as it is not required). If this input was left blank, I would like to assign an empty string "" to inputOneAns. Is there a wayf or me to embed an ternary operator inside of another ternary operator? To help clarify, here is the same function that I want to accompolish with my ternary function but with if else statements?

if (inputOne == "Yes"){
    var inputOneAns = "517"
}else if (inputOne == "No"{
    var inputOneAns = "518"
}else{
    var inputOneAns = ""
}

Is it possible to include multiple expressions into a ternary function? Is there a better way to accomplish what I am looking for? Thanks for the tips in advance.

Argumentum

You can nest ternary operators but it usually isn't very clear – Miffy

let inputOneAns = inputOne === 'Yes' ? '517' : inputOne === 'No' ? '518' : ''; but just don't. It's ugly and an if/else is far more readable. And if your colleagues know where you live, it's a risk you don't want to take... – Beanery

var choices = {Yes: 517, No: 518}; var inputOneAns = inputOne in choices ? choices[inputOne] : "" or inputOneAns = choices[inputOne] || "" – Homozygous

Answer 1

Yes you can go wild nesting ternaries. I find this version to be fairly readable:

var foo = (
  bar === 'a' ? 1 : // if 
  bar === 'b' ? 2 : // else if 
  bar === 'c' ? 3 : // else if
  null // else 
);

but that's not a widely shared opinion, and you should probably stick to if/else or switch when working on a team.

Eogene

very helpful, can we write multi-line statement using this syntax? – Lyman

yes, I wouldn't overdo it but the reason I like it is that ternary is an expression rather than a statement, so you can assign a const based on multiple conditions rather than having to reassign a variable. – Eogene

Thanks Damon, It's really helpful – Lyman

this is nice and elegant solution. thank you. – Bucher

You just saved me from a crazy headache... Thank you. – Ostrich

Answer 2

Yes, you can use multiple condition in Ternary Operator. Hope this will help you.

var x=20;
var y = x<13 ? "Child" : x<20 ? "Teenage" : x<30 ? "Twenties" : "Old people";
console.log(y);

Sublease

Answer 3

A switch statement is likely the best choice in a situation like this.

let inputOneAns;
switch(inputOne) {
  case "Yes":
   inputOneAns = "517";
   break;
  case "No":
   inputOneNas = "518";
   break;
  default:
   inputOneNas = "";
}

If you could do ternary operations beyond 2 conditions, they would become incredibly messy. You can put conditions together, but I've no idea why you would want that - that would be incredibly messy.

Mahlstick

Answer 4

The most elegant and clean way is to take advantage of Object literals:

const Switch = (str) => ({
  "Yes": "517",
  "No": "518",
})[str] || '';

console.log(Switch("Yes")); // 517
console.log(Switch("No"));  // 518
console.log(Switch("Non matching value")); // Empty

This has the advantage of being both readable and flexible.

Riches

Answer 5

Yeh you can chain them together much like using an else if statement, but it can sometimes be a bit hard to read though, so I tend to split mine over multiple lines.

var inputOneAns = inputOne == 'Yes' ? '517' :
  inputOne == 'No' ? '518' : '';

However in this case I would suggest a switch statement seeing as you're comparing the same value for every case.

Luau

Answer 6

var r = inputOne == "" ? "" : ( 
inputOne == "Yes" ? "517" : "518");

Eburnation

Answer 7

Unfortunately JavaScript does not provide a super terse and readable way to do this. Personally I would just use some single-line if statements like this:

var inputOneAns;
if (inputOne === 'Yes') inputOneAns = '517';
if (inputOne === 'No') inputOneAns = '518';
else inputOneAns = '';

Which can be even cleaner if you abstract it into a function (note: no need for else in this case):

function getInputOneAns(inputOne) {
    if (inputOne === 'Yes') return '517';
    if (inputOne === 'No') return '518';
    return '';
}

Personally, I don't really like switch statements for this for two reasons: firstly those extra break statements bloating the code, and secondly, switch statements are very limiting - you can only do simple equality checks, and only against a single variable. Besides, in the case that you know you will be always checking a single string I would favour a simple map object:

var map = { 'Yes': '517', 'No': '518' };
var inputOneAns = map[inputOne] || '';

Mehalek

Answer 8

Yes, and it does provide a cleaner code than switch statement.. with all the breaks..

inputOne == "Yes" ? "517" :
inputOne == "No" ? "518" : inputOneAns = "";

Logsdon

Answer 9

Seems like a classic use for a switch statement:

let inputOneAns = '';
switch(inputOne) {
  case 'Yes':
    inputOneAns = "517";
    break;
  case 'No': 
    inputOneAns = "518";
    break;
  default:
    inputOneAns = "";
}

• note you don't actually need the default case, but I find it makes things more readable.

Railing

Answer 10

just trust your intuition! here is what you can find in freecodecamp website as well:

var inputOneAns = inputOne == "Yes" ? "517" : inputOne == "No" ? "518" : "";

cheers!

Anhedral