Booleans and Comparisons

After this lesson you can

• Compare two values with ===, !==, <, >, <= and >=, and predict the true or false result
• Store the result of a comparison in a well-named boolean variable

Key takeaways

• A boolean is a value that is either true or false, written without quotes.
• A comparison asks a question about two values and answers with a boolean.
• === (strictly equal) is true when two values are the same and of the same type; !== (not strictly equal) is its opposite.
• < > <= >= compare sizes. One = puts a value into a variable; === asks whether two values match.
• Name a boolean like a yes-or-no question, such as isOpen or hasOatMilk.

Is the shop open yet? Does this card have enough stamps for a free drink? Is the password long enough? Is this item sold out? Every app is full of yes-or-no questions, and their answers decide what you see: a Buy button or a Sold out label, a Welcome back or a Sign in. In this lesson you'll ask those questions in code. In the next chapter, Decisions and Loops, your programs start acting on the answers.

Yes or no: booleans

A light switch is either on or off; there's nothing in between. A value that can only be one of two things is a boolean, named after George Boole, a mathematician who worked out the math of true and false in the 1800s. JavaScript's two boolean values are true and false, written without quotes:

const isOpen = true;
const hasOatMilk = false;

console.log(isOpen);
console.log(hasOatMilk);

true
false

With quotes, 'true' would be a string: four letters, not a yes-or-no value.

Comparing sizes: < > <= >=

A comparison asks a question about two values, and its answer is a boolean. These comparison operators ask about size:

const stamps = 10;
const stampsPerFreeDrink = 10;

console.log(stamps > 9);
console.log(stamps < stampsPerFreeDrink);
console.log(stamps >= stampsPerFreeDrink);
console.log(stamps <= 5);

true
false
true
false

Two tips: the open side of < and > faces the bigger number, and in <= and >= the = always comes second. => is a different symbol, the arrow, which you'll meet in the Functions chapter.

Same or different: === and !==

When you pick up a drink, the barista checks the number on your ticket against the number on the cup. In JavaScript that check is ===, read "triple equals" or "strictly equal". It's true when the two values are the same, and of the same type. !==, read "not strictly equal", asks the opposite.

const ticketNumber = 42;

console.log(ticketNumber === 42);
console.log(ticketNumber === 41);
console.log(ticketNumber !== 41);
console.log('latte' === 'Latte');
console.log(4.75 === '4.75');

true
false
true
false
false

Strings match only letter for letter, capitals included, so 'latte' and 'Latte' are different. And the number 4.75 isn't the string '4.75': they're different types, so === says false. Types and Converting Between Them comes back to this.

Keep the two kinds of equals sign apart. One = is assignment: it puts a value into a variable. Three, ===, asks a question and changes nothing. You'll also see == (two equals signs) in other people's code; it has looser rules that surprise people, shown in Equality and Truthy Values in Module 2. Use ===.

Try it. In your practice folder, make a file named compare.js. Declare const orderTotal = 18.5; and print whether it's over $15, whether it's exactly 20, and whether it isn't 20. Predict each answer before you run it.

Keeping the answer in a boolean variable

A comparison's answer is a value like any other, so you can store it in a variable and use it later. Name it like a yes-or-no question, starting with is, has or can, and the code reads like a sentence:

const stamps = 7;
const stampsPerFreeDrink = 10;

const hasFreeDrink = stamps >= stampsPerFreeDrink;
const isFirstVisit = stamps === 0;

console.log(`Free drink earned: ${hasFreeDrink}`);
console.log(`First visit: ${isFirstVisit}`);
console.log(`Stamps to go: ${stampsPerFreeDrink - stamps}`);

Free drink earned: false
First visit: false
Stamps to go: 3

JavaScript works out the right side first: stamps >= stampsPerFreeDrink is 7 >= 10, which is false, and false goes into hasFreeDrink. A name like hasFreeDrink tells a reader exactly what true would mean; a name like check or result doesn't.

Try it. In compare.js, store whether a customer is old enough for the shop's barista class (const age = 17;, and the class is for 18 and over) in a boolean with a clear name, and print it in a sentence with a template literal.

Check yourself

2 questions to try on the lesson page.

So what

Every decision a program makes, from showing a discount to locking a door, starts as a comparison with a true or false answer. Clear comparisons and well-named booleans are what the next chapter's if statements are built on.

Key terms

• Boolean
• Comparison Operators
• Strict Equality (===)
• Strict Inequality (!==)

Cheat sheets

• Booleans and Comparisons

Related

• Numbers and Math
• Types and Converting Between Them