An exciting foray into Booleans. What Ho!

These values that we’re using, true and false, have a special name. They are called Boolean values, named after the wonderful Victorian English mathematician George Boole who first described them. Boolean values are actually the basis for all computing. You may have heard it said that computers use ones and zeros, and it’s true. Deep inside, computers are made of vast arrays of switches, which can be either on or off, one or zero, true or false.

George Boole - He looks like a nice sort of chap, a bit like Colin Firth.

The simple operations we carry out on Boolean values, when combined in clever ways, let a computer do all the clever things it’s able to do. When you move your mouse pointer, there’s a whole cascade of little ones and zeroes bouncing around inside the chips and cables that you will never see.

In the context of JavaScript, Booleans are useful in decision making. Should we do this or that? Should we let the user submit their shopping cart or not. Should this element be clickable or not. Lets have a look at what we can do.

This AND That

One of the simplest things we can do with Booleans is the “and” operation. It looks like this:

let daytime = true;
let sunny = true;

let canGoOut = daytime && sunny;

Here we set a variable called canGoOut. This variable will be true if both daytime and sunny are true.

We can use this in a program like so:

let daytime = true;
let sunny = true;

let canGoOut = daytime && sunny;

if (canGoOut) {
  alert("lets go out!");
}

or more simply:

let daytime = true;
let sunny = true;

if (daytime && sunny) {
  alert("lets go out!");
}

let daytime = true;
let sunny = true;
let iceCream = true;

if (daytime && sunny && iceCream) {
  alert("lets go out!");
}

This OR That

The second useful thing we can do with Booleans is OR. Sometimes we want to be able to say “do something if this other thing is true, OR if this second other thing is true. We do this in Javascript using two vertical bar character ||. For example:

let iFancyIcecream = false;
let youFancyIcecream = true;
let buyIcecream = iFancyIcecream || youFancyIcecream;

We can use this in a program like this:

let iFancyIcecream = false;
let youFancyIcecream = true;
if (iFancyIcecream || youFancyIcecream) {
  alert("I am just going to the shop now...");
}

This and that or this

You’re getting the idea now, these boolean operators are operators just like any other. As such we can combine them together to make compound expressions:

let cheese = true;
let icecream = true;
let bread = true;
let soda = true;
let littlePotsOfFrenchYoghurt = true;

let iHaveAPicnic =
  (cheese && bread && icecream) || (soda && littlePotsOfFrenchYoghurt);

See? I have a picnic if I have cheese AND bread AND icecream; OR if I have soda AND Petit Filou, or somesuch tomfoolery.

George would probably have approved, he looks the type to enjoy a Petit Filou on a hot day.

Not That!

Another useful thing we can do with Booleans is Not.

Sometimes we want something to happen if something is not true. For example we might want to display an error if someone has not filled in a field correctly. We say not! in JavaScript using an exclamation mark, like so:

let filledInField = false;
if (!filledInField) {
  alert("Please fill in the field!");
}

NOT changes a true to a false and vice versa. If southing is true, make it false. If something is false, make it true.

Equals this ===?

So far and so esoteric. It’s all very well setting Boolean values explicitly in our code, but for this to be useful we need to be able to be able to make Booleans from other values. Lets return to our timing example above. Lets say that have a variable called hour, and we want to determine if it’s mid-day or not. We might do something like this:

let hour = 12;
let midday = hour === 12;

alert("hey yo, it's midday");

Here we’re simply saying: if the hour variable is equal to 12, the midday variable is true. In JavaScript === means equal to. That’s right, === is also a boolean operator.

My dad is bigger > than your dad

We can do other mathematical operations to make Booleans. Here we do one thing if hour > 12 and another if hour is less than 12.

let hour = 13;
if (hour > 12) {
  alert("after midday");
} else {
  alert("before midday");
}

hour > 12 is an expression that evanlutes to either true or false, depending on whether the hour is indeed greater than 12.

We can combine Boolean operators in all kinds of ways, for example:

let hour = 13;
if (hour > 11 && hour < 14) {
  alert("you could have lunch now.");
} else {
  alert("it isn't lunchtime.");
}

let hour = new Date().getHours();

if (hour < 7) {
  alert("Too Early!");
} else if (hour === 7) {
  alert("Breakfast");
} else if (hour === 11) {
  alert("Second Breakfast");
} else {
  alert("Fool of a Took!");
}

let myDadSize = 12;
let yourDadSize = 13;
if (myDadSize > yourDadSize) {
  alert("My dad is the biggest (of course).");
} else if (myDadSize < yourDadSize) {
  alert("Oh, your dad is the biggest.");
} else {
  alert("Our dads are the same size");
}

Onwards and ever upwards! Did I mention you’re doing a brilliant job? Next up is Loops!