Multiple Ternary Operators

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.

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;
}

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

How about:

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

How about an object literal.

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

icon = icons[area];

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"

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