Using Structure as Conditional Logic

In the cohort I teach we have students learn some fundamental Javascript concepts by building a Rock, Paper, Scissors game. So at the end of each game player 1 has chosen one of the three, and player 2 has also chosen one of the three. So we have nine possible results.

Now, we could write an extended if/else statement or a switch statement for this -- and that's what you'd expect from beginners and that's fine. But a better, more elegant solution occured to me yesterday: one that is extremely scalable.

Lets put player one's choice into a variable: player1choice.

And player two's choice becomes player2choice.

Now let's create an object with three keys: rock, paper, and scissors. These keys are for player one's choice. Each of these keys points to an object, which also has three keys: rock, paper, and scissors. But the value of these keys is the verdict of who wins when the top level key is combined with the inner key. See below:

const combos = {
  rock: {
    rock: "tie",
    paper: "loss",
    scissors: "win"
  },
  paper: {
    rock: "win",
    paper: "tie",
    scissors: "loss"
  },
  scissors: {
    rock: "loss",
    paper: "win",
    scissors: "tie"
  }
}        

Determining the winner is now super easy, thanks to the ability to use variables as object keys. To determine if player 1 wins, loses or ties, we simply do this:

const player1result = combos[player1choice][player2choice]        

When referencing an object key with square brackets as shown here, Javascript first evaluates the variable in the brackets. Only then does Javascript actually navigate through the object.

I like this solution because of how readable the logic is, and because it would be trivial to add additional data points to the process. Rather than write a bunch of if statements, the natural structure of the combos object encapsulates all of it for us.

This solution works for any kind of decision system where there are multiple combination possibilities of multiple variables.

But we're not done yet!

"Rock, Paper, Scissors" is a little different in that the keys of the outer object are the same as the inner keys. In other words, player 1 and player 2 have the same three choices. If we wanted to write a solution that isn't nearly as readable, but takes up as little coding space as possible, we could do this:

const logic = {
  rock: ["tie", "loss", "win"],
  paper: ["win", "tie", "loss"],
  scissors: ["loss", "win", "tie"]
}

const player1Result = logic[player1Choice][Object.keys(logic).findIndex( choice => choice === player2Choice )]        

See if you can parse the line of code above to understand how it works.

Feel free to test this solution here: https://codepen.io/garytalmes/pen/NWedNZe