59

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.

Barthy
  • 2,969
  • 1
  • 21
  • 38
Sam
  • 1,303
  • 3
  • 14
  • 22

6 Answers6

101

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;
}
Barthy
  • 2,969
  • 1
  • 21
  • 38
Justin Ethier
  • 127,537
  • 50
  • 225
  • 279
  • 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
39

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

Adam
  • 3,425
  • 28
  • 23
29

How about:

var icon = [ icon0, icon1, icon2 ][area];
Barthy
  • 2,969
  • 1
  • 21
  • 38
Pointy
  • 389,373
  • 58
  • 564
  • 602
  • 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
12

How about an object literal. 

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

icon = icons[area];
Bruno
  • 5,662
  • 1
  • 23
  • 43
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"
adiga
  • 31,610
  • 8
  • 53
  • 74
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
7
var icon = (area == 0) ? icon0 : (area == 1) ? icon1 : icon2;
Barthy
  • 2,969
  • 1
  • 21
  • 38
John Hartsock
  • 82,242
  • 22
  • 125
  • 144