Make the Computer Think—Logic

30.05.2016 |

Episode #6 of the course A quick introduction to JavaScript by Rich Armstrong

 

A computer can be quite logical and a great decision-maker! But you have to tell it what to do in every circumstance. “If something is true, do this; otherwise, do that.” We write if statements in JavaScript like this:

var condition = true;
if (condition) {
 console.log('condition met');
} else {
 console.log('condition not met');
}

The condition, the code between the (), evaluates a statement to be either true or false (so it converts it to a boolean value) and then runs the applicable code between the {}. You could leave the else part out and simply ask if a statement is not true. So if it’s raining, you could ask ”Is it raining?” but you could also ask ”Is it not sunny?” and both would evaluate to true.

var isRaining = true;
var isSunny = false;
if (isRaining) {
 console.log('It is raining!');
}
if (!isSunny) {
 console.log('It is raining here too!');
}

Notice the ! symbol. This symbol reverses a boolean value. So if there is a simple boolean being evaluated in an if-else statement, there can only be a max of two options. However, if we’re evaluating something more complex, there can be many options:

var randomNum = Math.round(Math.random() * 100);
var luckyNumber = 72;
if (randomNum == luckyNumber) {
 console.log('Whoop! Lucky number!!');
} else if (randomNum == 10) {
 console.log('Got 10!');
} else if (random > 50) {
 console.log('Bigger than 50!');
} else if (random <= 99) {
 console.log('Smaller than or equal to 99');
} else {
 console.log('Got some number: ' + randomNum);
}

Notice the if-else, if-else, else. This could be a massively long if-else statement if we were to check for every value. Also notice the comparison operators: ==, >, and <=. These compare the left and right sides of a statement and return a boolean value. If you’re wanting to see if something is equal to something else, always use == or === and not =, as this assigns a value. But give it a try and see what happens! == does some conversion and sees whether they kind of match, so 1 == '1' would be true and 1 == true would be true, but 1 === '1' would be false, because this is checking for an exact match. Try to write some of your own if-else statements now. Compare strings, numbers, and booleans. Once there is a match, the rest of the if-else statement does not run.

But what if we want to see whether this is true or that is true? Or whether this is true and that is true? And what if we want to do it before running some code? You could write an if-else statement inside of an if-else statement, or you can do it like so:

var myNum = 9;
if (1 > myNum || 'pizza'.length === 5) {
 console.log('Oh yeah');
}
if (myNum == 9 && 2 > 0) {
 console.log('This be true yo!');
}

Cool, huh? There’s also another way to do logic in JavaScript. It’s called the switch statement. See if you can understand what’s going on here:

var doFoodStuff = function (food) {
 switch (food) {
  case 'pizza':
   console.log('Throw the pizza like a frisbee');
   break;
  case 'burger':
   console.log('Nice buns good looking!');
   break;
  case 'pasta':
   console.log('Slurp that thing down!');
   break;
  default:
   console.log('Get over that food man!');
   break;
 }
}
doFoodStuff('burger');
doFoodStuff('curry');

Important things to note are the break; statements and the default: case. Try running the above code without some break; statements and without the default: case. Switch statements are great replacements for long if-else statements, especially when there can be many options for a single value.

Remember: Download Google Chrome for Desktop and Sublime Text 3 to make the most of these lessons. And remember to open up your JavaScript Console: Alt+Cmd+J (OS X) or Alt+Ctrl+J (Windows).

 

Recommended book

“A Software Engineer Learns HTML5, JavaScript and jQuery” by Dane Cameron

 

Share with friends