Outputting flavor text depending on inputted strings I have this program that takes two strings from the user, stores them in mixArray, then "mixes" them with mixItUp() and outputs a bit of flavor text, depending on the combination. Duplicate combinations (red-blue, blue-red) also give the same outcome.

I've gotten to a nested switch statement that's miles shorter than my previous tries, but I'm trying figure out if there's a more optimal, or readable method to do this, since I intend to scale it up.

mixItUp() {
  this.mixArray.sort();            // Sorts the array
  switch (this.mixArray[0]) {      // Goes through the first object
    case "blue":
      switch (this.mixArray[1]) {  // Goes through the second if the first is "blue"
        case "green":
          console.log("bf");
          break;
        case "purple":
          console.log("bg");
          break;
        case "yellow":
          console.log("bp");
          break;
        default:
          console.log("??");
          break;
      }
      break;
    case "green":     // If [0] is "green"...
      switch (this.mixArray[1]) {
        case "purple":
          console.log("fg");
          break;
        case "yellow":
          console.log("fp");
          break;
        default:
          console.log("??");
          break;
      }
      break;
    case "purple":     // If [0] is "purple"...
      switch (this.mixArray[1]) {
        case "yellow":
          console.log("gp");
          break;
        default:
          console.log("??");
          break;
      }
      break;
    default:
      break;
  }
}
It seems this could be simplified with a small lookup table and then concatenating strings. Using a table as simple as:

const lookup = {
  blue: 'b',
  green: 'f',
  purple: 'g',
  yellow: 'p'
};


we can then lookup the color values and concatenate them together. Combined with a simple check to make sure the color is valid and the 2 colors aren't the same, and it seems to produce the same result. 

Here's the full function:

mixItUp: function() {
  this.mixArray.sort();
  const lookup = {
    blue: 'b',
    green: 'f',
    purple: 'g',
    yellow: 'p'
  };

  let mix;
  const color1 = lookup[this.mixArray[0]];
  const color2 = lookup[this.mixArray[1]];

  if (color1 &amp;&amp; color2 &amp;&amp; (color1 !== color2)) {
    mix = `${color1}${color2}`;
  } else {
    mix = '??';
  }

  return mix;
}


And here it is in action:



function createMix(color1, color2) {
  return {
    mixArray: [color1, color2],
    mixItUp: function() {
      this.mixArray.sort();
      const lookup = {
        blue: 'b',
        green: 'f',
        purple: 'g',
        yellow: 'p'
      };

      let mix;
      const color1 = lookup[this.mixArray[0]];
      const color2 = lookup[this.mixArray[1]];
      
      if (color1 &amp;&amp; color2 &amp;&amp; (color1 !== color2)) {
        mix = `${color1}${color2}`;
      } else {
        mix = '??';
      }

      return mix;
    }
  }
}


// Handle the form
const form = document.getElementById('mixitup');

form.addEventListener('submit', event =&gt; {
  event.preventDefault();
  const color1 = document.getElementById('color1').value;
  const color2 = document.getElementById('color2').value;

  const mixedArray = createMix(color1, color2)
  console.log(mixedArray.mixItUp())
})
&lt;form id="mixitup"&gt;
  &lt;select id="color1"&gt;
    &lt;option value=""&gt;Select...&lt;/option&gt;
    &lt;option value="blue"&gt;Blue&lt;/option&gt;
    &lt;option value="green"&gt;Green&lt;/option&gt;
    &lt;option value="purple"&gt;Purple&lt;/option&gt;
    &lt;option value="yellow"&gt;Yellow&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id="color2"&gt;
    &lt;option value=""&gt;Select...&lt;/option&gt;
    &lt;option value="blue"&gt;Blue&lt;/option&gt;
    &lt;option value="green"&gt;Green&lt;/option&gt;
    &lt;option value="purple"&gt;Purple&lt;/option&gt;
    &lt;option value="yellow"&gt;Yellow&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="submit" value="Mix it up!"&gt;
&lt;/form&gt;