This is going to be a fun week at ng-club! We are going to work on creating a “Choose Your Own Adventure” game. This exercise will specifically highlight the use of conditional statements in code.

The Boolean

The first major concept to understand is a type of variable called a boolean. A boolean is one of two values: true or false. In most cases, however, boolean values are set by comparing different values. For example:

// this evaluates to true
4 + 7 === 11

// this evaluates to true
1 + 1 !== 5

// this evaluates to true
1 < 5

// this evaluates to false
1 + 1 === 5

// this evaluates to true
"hello, Jeff" === "hello, Jeff"

// this evaluates to true
"hello, Jeff" !== "hello, Rob"

// this evaluates to false
"hello, Jeff" === "hello, Rob"

You will note that there are different symbols used to compare two values.

The first one is === which you should be careful to remember is very different than a single =. I single = is used to variable assignment (i.e. setting a variable value), while the triple === is used for comparison to see if the two values are equal to each other.

For the other values, !== checks if the two values are NOT equal to each other. Then there is > which checks if the first value is GREATER THAN the second value (only used with numbers).

The IF – ELSE IF – ELSE Statement

In your code, booleans are most often used in either loops (more on that next week) or conditional IF statements that look something like this:

if (someVariable === "yes") {
  console.log('Got to yes');
} else if (someVariable === "no") {
  console.log('Got to no');
} else {
  console.log('Got unknown value: ' + someVariable);

In this code there is a variable called someVariable that is being compared first against the string “yes” and then the string “no”. The way IF conditional statements work is that when any comparison evaluates to true then the code within that block (i.e. inbetween the { }) is executed. If, however, the comparison evaluates to false then the code in that block is skipped.

So, for example, if you had var someVariable = "yes"; and then run this code, the first conditional would evaluate to true and a message would be printed to the console “Got to yes”. The second conditional (i.e. someVariable === "no") would evaluate to false so that block is ignored. Finally the else is also ignored. The else> will only run if all the other conditions evaluate to false.

Choose Your Own Adventure

So, knowing all this, it is pretty easy to set up a function to do a Choose Your Own Adventure style game like this:

function chooseYourAdventure() {
  var input = window.prompt('A monster attacks you. Do you run? (enter yes or no)');

  if (input === 'yes') {
    console.log('You run and live. Whew!');
  } else if (input === 'no') {
    console.log('You stay and die. Sorry!');
  } else {
    console.log('Sorry, I didn't understand. Lets try again.');

Categories: Uncategorized

Jeff Whelpley

CTO at GetHuman, Google Developer Expert, AI and Angular Boston meetup organizer

Leave a Reply

Your email address will not be published. Required fields are marked *