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.

Solution 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.

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

Solution 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.

Solution 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.

Solution 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.

View more solutions

Comments

[MinusFour]

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

[Sikshya Maharjan]

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...

[Bergi]

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

[Hidayt Rahman]

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

[Damon]

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.

[Hidayt Rahman]

Thanks Damon, It's really helpful