Multiple Ternary Operators

Question

I need a bit of syntax help with a ternary operator which will help me to put the correct marker icons on to my good map. I have three areas 0, 1 and 2 which have unique icons 0, 1 and 2.

I used to have just two areas so this ternary operator worked fine;

var icon = (area == 1) ? icon1 : icon0;

Now I need to add an additional third icon (icon2) for area2.

I've tried various methods but just can't seem to get it right.

score 121 · Accepted Answer · edited May 16 '20 at 09:24

121

The syntax would be:

var icon = (area == 1) ? icon1 : (area == 2) ? icon2 : icon0;

But this is starting to get complicated. You may well be better off just creating a function to do this work instead:

var icon = getIcon(area);

function getIcon(area) {
  if (area == 1) { 
    return icon1; 
  } else if (area == 2) { 
    return icon2; 
  }

  return icon0;
}

edited May 16 '20 at 09:24

Barthy

3,151
1
25
42

answered Oct 13 '11 at 16:53

Justin Ethier

131,333
52
229
284

1

After I wrote this, I realized that 0 always maps to icon0, so Pointy's answer is preferable. However, this approach is still viable if you need a 'catch-all' value such as `icon0` in this case. – Justin Ethier Oct 13 '11 at 16:56
Thanks Justin, I decided the function best suited my needs. I also find it more friendly to work with rather than ternary operator which may grow even bigger over time. Thanks. – Sam Oct 14 '11 at 08:45

score 48 · Answer 2 · answered May 02 '19 at 18:29

For anyone that's confused about the multiple ternary syntax (like I was), it goes like this:

var yourVar = condition1 ? someValue
            : condition2 ? anotherValue
            : defaultValue;

You can add as many conditions as you like.

You can read up further on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

score 30 · Answer 3 · edited May 16 '20 at 09:25

30

How about:

var icon = [ icon0, icon1, icon2 ][area];

edited May 16 '20 at 09:25

Barthy

3,151
1
25
42

answered Oct 13 '11 at 16:52

Pointy

405,095
59
585
614

Yes that's a good point - it relies on "area" being well-behaved, so to speak. – Pointy Oct 13 '11 at 16:55
I like this method but marked Justin's as the answer as it best suited by needs. Many thanks for this tip. – Sam Oct 14 '11 at 08:39
1

What is this operation called? – JM-AGMS Jun 01 '17 at 21:18
2

@JM-AGMS it's just a simple array index operation. The `area` variable contains a number. – Pointy Jun 01 '17 at 21:19
3

`['A', 'B', 'C'][area]` so if area = 2, `C` would be the value? I never even thought to define and set the array index at the same time. – JM-AGMS Jun 01 '17 at 21:34
1

@JM-AGMS yes, that's right. An array literal is just as much an array as a variable whose value is an array. – Pointy Jun 01 '17 at 21:38
1

If you wanted icon0 to be a fallback, it would just be `icon: { 1: icon1, 2: icon2 }[area] || icon0` – aaaaaa Apr 12 '18 at 17:34

score 13 · Answer 4 · answered Oct 13 '11 at 20:08

13

How about an object literal.

icons = {
    0: icon0,
    1: icon1,
    2: icon2
}

icon = icons[area];

answered Oct 13 '11 at 20:08

Bruno

5,772
1
26
43

score 8 · Answer 5 · edited Mar 14 '19 at 13:44

8

Very simple way

If your object is like this:

var obj = {
  x: true,
  y: {
    xy: 'some value'
  }
}

var result = obj ? obj.y ? obj.y.xy ? obj.y.xy : 'N/A' : 'N/A' : 'N/A'

console.log(result) // "some value"

edited Mar 14 '19 at 13:44

adiga

34,372
9
61
83

answered Apr 20 '17 at 10:34

Sushil Dhayal

87
1
6

this is not a very good test, as `test1 ? test1 : (test2 ? test2 : 'some default value')` and `(test1 ? test1 : test2) ? test2 : 'some default value'` both give the same result – chharvey Nov 20 '17 at 16:40
a better test would be: `var test = true; var result = test===true ? 'it is true' : test===false ? 'it is false' : 'it is null'`. That way when you group the last two operators, `test===true ? 'it is true' : (test===false ? 'it is false' : 'it is null')`, you get `'it is true'` (correct), but when you group the first two operators, `(test===true ? 'it is true' : test===false) ? 'it is false' : 'it is null'`, you get `'it is false'` (incorrect). This test is better because it shows you the implicit operator groupings. – chharvey Nov 20 '17 at 16:53

score 7 · Answer 6 · edited May 16 '20 at 09:26

7

var icon = (area == 0) ? icon0 : (area == 1) ? icon1 : icon2;

edited May 16 '20 at 09:26

Barthy

3,151
1
25
42

answered Oct 13 '11 at 16:52

John Hartsock

85,422
23
131
146

quick Q: are the brackets necessary? – oldboy Aug 11 '19 at 06:11
1

@BugWhisperer I believe you mean the parenthesis, and no the parenthesis are not necessary was just trying to show separation. – John Hartsock Aug 21 '19 at 15:32
yes thats what i meant. ok, i know in some contexts the brackets are necessary which is why i asked – oldboy Aug 21 '19 at 20:14

Rijo Sebastian · Answer 7 · 2023-06-20T11:04:02.080

0

A sequence of question mark operators ? can return a value that depends on more than one condition.

For instance:

let age = prompt('age?', 18);

let message = (age < 3) ? 'Hi, baby!' :
  (age < 18) ? 'Hello!' :
  (age < 100) ? 'Greetings!' :
  'What an unusual age!';

alert( message );

edited Jun 20 '23 at 11:04

answered Jun 20 '23 at 11:02

Rijo Sebastian

1
3

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 21 '23 at 05:19

Multiple Ternary Operators

7 Answers7

Linked

Related