Making decisions

Before you start, set up a new project folder named day04 exactly as you set up day01 in 1.2: open the folder in VS Code, run npm init -y and npm install --save-dev typescript in its terminal, and type the same tsconfig.json. Every program today goes in that folder.

Every program so far has done the same thing every time it ran. On Day 1 you learned that statements run one at a time, from top to bottom, and none was ever skipped. But real programs make decisions: show “Sold out” only when there are no tickets left, charge less for children, warn when a password is too short. Today you learn how a program asks a yes-or-no question and then chooses what to do with the answer.

The answer to a yes-or-no question is a boolean: Day 2’s type with only two values, true and false. The first way to make one is to compare two values. Is the score above the pass mark? Is the price at most the budget? The symbols that ask these questions are comparison operators. Each one sits between two values, compares them, and gives back true or false.

The two right-hand columns put each operator in place of the ?. Notice the second column: 5 is not greater than 5, but it is greater than or equal to 5. The = in >= and <= is what lets the two sides be equal. Both are written as two characters with no space, and the = always comes second: >=, never =>. Equality is three characters, ===, which 4.2 explains; a single = still means “store a value,” as it has since Day 2.

const score = 72;
const passMark = 60;
console.log(score > passMark);
console.log(score < passMark);
console.log(score >= 72);
console.log(score <= 71);
console.log(score === 72);
console.log(score !== 72);
const isPassing = score >= passMark;
console.log(isPassing, typeof isPassing);

true
false
true
false
true
false
true boolean

Now vary what is compared. A comparison can have a calculation on either side, and it can compare strings:

const price = 4.5;
const quantity = 3;
const budget = 15;
console.log(price * quantity <= budget);
console.log(price * quantity + 2 <= budget);
console.log("apple" < "banana");
console.log("Zebra" < "apple");
console.log("cat" < "catalog");

true
false
true
true
true

Line 4 asks whether 4.5 × 3 fits the budget. The comparison operators come after arithmetic in the precedence table from Day 2, so price * quantity is worked out to 13.5 first, and then 13.5 <= 15 is true. On line 5, price * quantity + 2 is 15.5, which is more than 15. You never need parentheses around the arithmetic in a comparison, though you may add them to make it easier to read.

Lines 6 to 8 compare strings. Two strings are compared one character at a time from the start, and the first character that differs decides; this is close to dictionary order, which is why "apple" < "banana" is true. But it is not exactly dictionary order: each character has a code number inside the computer, and every capital letter’s number is smaller than every small letter’s. So line 7, "Zebra" < "apple", is true: Z comes before a. On line 8, "cat" runs out of characters while it still matches "catalog", and a string that is the start of a longer one comes first.

const firstScore = "10";
const secondScore = "9";
console.log(firstScore < secondScore);
console.log(Number(firstScore) < Number(secondScore));

true
false

const age = 16;
console.log(age < "18");

age-vs-text.ts:2:13 - error TS2365: Operator '<' cannot be applied to types 'number' and 'string'.

const height = 135;
const minimum = 120;
console.log(height >= minimum);
console.log(height - 20 > minimum);
console.log(height === minimum + 15);
console.log("Ana" < "Ben");
console.log("ana" < "Ben");

true
false
true
true
false

The most common question a program asks is “are these two the same?” Is the typed password the stored one? Is the command "help"? Day 3 previewed the operator for this, ===; now you can learn exactly what it does, and why TypeScript programmers always use it instead of a shorter operator that looks similar.

a === b is true when a and b have the same type and the same value, and false otherwise. Its opposite, a !== b, is true when they differ in type or in value. This kind of equality, which never converts either side to another type, is called strict equality. Two numbers are equal when they are the same number. Two strings are equal when they have exactly the same characters in the same order, so case counts. Two booleans are equal when both are true or both are false.

const answer = 6 * 7;
console.log(answer === 42);
console.log(answer !== 42);
const city = "lima";
console.log(city === "lima");
console.log(city.toUpperCase() === "LIMA");
const total = 0.1 + 0.2;
console.log(total === 0.3);
console.log(total.toFixed(2) === "0.30");

true
false
true
true
false
true

JavaScript has a second, older equality operator, ==, with its opposite !=. It is called loose equality: when the two sides have different types, == first converts one or both of them, and only then compares. The conversion rules are long and full of surprises. Look what npx tsc says about two loose comparisons:

console.log("5" == 5);
console.log(0 == "");

loose-equals.ts:1:13 - error TS2367: This comparison appears to be unintentional because the types 'string' and 'number' have no overlap.
loose-equals.ts:2:13 - error TS2367: This comparison appears to be unintentional because the types 'number' and 'string' have no overlap.

The checker rejects both lines, because comparing a string with a number is almost certainly a mistake; 4.3 explains this message in full. But remember from Day 1 that node runs a file without checking its types. Run node loose-equals.ts anyway, and it shows:

true
true

On line 1, == converted "5" to the number 5, so the string and the number count as equal. On line 2, it converted the empty string to the number 0, so “no text at all” counts as equal to zero. Neither is what a reader expects. With ===, both lines would be false, because a string is never strictly equal to a number. Fix or delete loose-equals.ts now, before your next check.

So why does == exist, and why avoid it? It is from the first version of JavaScript, and, like typeof null, it can never be removed without breaking old websites. When both sides already have the same type, == gives the same answer as ===; it only behaves differently when the types differ, and that is exactly where its answers surprise people. This course, like most TypeScript code, uses only === and !==.

const total = 12;
console.log(total = 12);

single-equals.ts:2:13 - error TS2588: Cannot assign to 'total' because it is a constant.

const word = "Tea";
const count = 2 + 2;
console.log(count === 4);
console.log(count !== 4);
console.log(word.toLowerCase() === "tea");
console.log(word === "Tea");
console.log(word.length === 3);

true
false
true
true
true

You have now seen TS2367 twice. It is one of the most useful messages the checker gives, because it catches a comparison that can never be true. A condition like that is always a bug: either the code was meant to compare something else, or a value has the wrong type.

Here is the most common cause. A program holds an age typed as text, and compares it with a number:

const typedAge = " 16 ".trim();
const minimumAge = 16;
console.log(typedAge === minimumAge);

age-text.ts:3:13 - error TS2367: This comparison appears to be unintentional because the types 'string' and 'number' have no overlap.

Take the message apart:

Two types overlap when some value belongs to both of them. No value is both a string and a number, so typedAge === minimumAge is false every time it runs, whatever the age. The checker reports it, instead of letting your if quietly never run. The fix is the one from Day 2: convert the text first.

const typedAge = " 16 ".trim();
const minimumAge = 16;
console.log(Number(typedAge) === minimumAge);

true

Number(typedAge) is the number 16, so both sides are numbers and the comparison can be true. If you typed age-text.ts, fix or delete it now.

const today = "Saturday";
console.log(today === "Sunday");

today.ts:2:13 - error TS2367: This comparison appears to be unintentional because the types '"Saturday"' and '"Sunday"' have no overlap.

const today: string = "Saturday";
console.log(today === "Sunday");
console.log(today === "Saturday");

false
true

From here on, whenever a program’s starting value stands for something that could be different each time it runs, such as a typed command, a score, or a day, this course writes an annotation on it: const score: number = 72;. A value that comes out of a method, such as typedDay.trim(), needs none: the checker gives a method’s result the plain type string, as it did for typedAge above.

const email = "ana.lee@example.com";
console.log(email.indexOf("@") === "-1");

at-sign.ts:2:13 - error TS2367: This comparison appears to be unintentional because the types 'number' and 'string' have no overlap.

const city: string = "Lima";
const visitors = 120;
const capital = "Lima";
console.log(city === "Paris");
console.log(visitors === "120");
console.log(capital === "Paris");
console.log(String(visitors) === "120");

predict-overlap.ts:5:13 - error TS2367: This comparison appears to be unintentional because the types 'number' and 'string' have no overlap.
predict-overlap.ts:6:13 - error TS2367: This comparison appears to be unintentional because the types '"Lima"' and '"Paris"' have no overlap.

Many rules have more than one part. A ride lets you on if you are tall enough and old enough. A shop is busy on Saturday or Sunday. You may go out if it is not raining. Each part is a comparison you already know how to write; what you need is a way to combine them.

The logical operators combine booleans into a new boolean:

• a && b (read “a and b”) is true only when both sides are true.
• a || b (read “a or b”) is true when at least one side is true. The | key is usually above Enter, typed with Shift.
• !a (read “not a”) flips one boolean: !true is false, and !false is true.

A table of every possible combination is called a truth table:

Notice that || is true when both sides are true. In everyday speech, “tea or coffee?” usually means one or the other, but in code, “or” includes both.

const height: number = 135;
const age: number = 7;
console.log(height >= 120 && age >= 8);
console.log(height >= 120 || age >= 8);
const day: string = "Sunday";
console.log(day === "Saturday" || day === "Sunday");
const isRaining: boolean = true;
console.log(!isRaining);
console.log(!(age >= 8));

false
true
true
false
true

Where do the logical operators go in the precedence order? ! belongs to the value right after it, so it is applied before anything else: that is why line 9 needs parentheses. Then come arithmetic, then the comparisons, then &&, and last ||.

Because && comes before ||, mixing them gives different answers depending on the parentheses. A park lets you in free if you are a senior, or if you are a member on a holiday:

const age: number = 70;
const isMember: boolean = false;
const isHoliday: boolean = false;
console.log(age >= 65 || isMember && isHoliday);
console.log((age >= 65 || isMember) && isHoliday);

true
false

On line 4, && goes first: isMember && isHoliday is false && false, which is false, and then true || false is true. The 70-year-old gets in. On line 5, the parentheses make || go first: true || false is true, and then true && isHoliday is false. Now the rule says “a senior or a member, and only on a holiday,” which is a different rule. When you mix && and ||, add parentheses so that the code says exactly what the English rule says.

const score: number = 105;
console.log(0 <= score <= 100);

chain-wrong.ts:2:13 - error TS2365: Operator '<=' cannot be applied to types 'boolean' and 'number'.

const score: number = 105;
console.log(0 <= score && score <= 100);

false

const temperature: number = 22;
const isSunny: boolean = false;
console.log(temperature > 20 && isSunny);
console.log(temperature > 20 || isSunny);
console.log(!isSunny && temperature < 25);
console.log(!(temperature > 20 && temperature < 25));

false
true
true
false

Look again at the truth table. If the left side of && is false, the answer is false whatever the right side is. If the left side of || is true, the answer is true whatever the right side is. JavaScript uses this: it works out the left side first, and when that already decides the answer, it does not work out the right side at all. Skipping the right side like this is called short-circuit evaluation.

That sounds like a small speed-up, but it matters for correctness. In 3.4 you saw that reading a character past the end of a string gives undefined, and that calling a method on undefined crashes the program. Short-circuiting lets the left side check that it is safe to work out the right side:

const nickname: string = "";
console.log(nickname.length > 0 && nickname[0].toUpperCase() === "A");
console.log(nickname.length === 0 || nickname[0].toUpperCase() === "A");

false
true

Now vary the order. Put the risky part first:

const nickname: string = "";
console.log(nickname[0].toUpperCase() === "A" && nickname.length > 0);

npx tsc reports no errors for this file, but node short-circuit-crash.ts stops with:

TypeError: Cannot read properties of undefined (reading 'toUpperCase')

The left side runs first, nickname[0] is undefined, and the program crashes before && ever gets to the length check. The checker cannot help here: as 3.4 explained, it treats nickname[0] as a string whatever the index. So with && and ||, the order of the two sides matters, even though the truth table gives the same answer either way. Put the safety check first.

The checker uses short-circuit reasoning too. It knows the right side of || runs only when the left side was false, and it can use that to spot a condition that is always true:

const day: string = "Sunday";
console.log(day !== "Saturday" || day !== "Sunday");

weekday-wrong.ts:2:35 - error TS2367: This comparison appears to be unintentional because the types '"Saturday"' and '"Sunday"' have no overlap.

The writer meant “is it a weekday?”, that is, “not Saturday and not Sunday.” Column 35 is the second comparison. The checker reasons like this: the right side of || only runs when day !== "Saturday" was false, which means day is "Saturday", so comparing it with "Sunday" cannot tell anything new. In fact the whole condition is true for every day, because no day is both Saturday and Sunday. (The checker following your conditions to learn more about a value is a preview of Day 9, which calls it narrowing.) Fix or delete weekday-wrong.ts. The English “not Saturday and not Sunday” uses “and”:

const day: string = "Sunday";
console.log(day !== "Saturday" && day !== "Sunday");

false

For Sunday, day !== "Saturday" is true, but day !== "Sunday" is false, so && gives false: Sunday is not a weekday.

const code: string = "";
console.log(code.length >= 2 && code[1].toUpperCase() === "B");
console.log(code.length < 2 || code[1].toUpperCase() === "B");
console.log(code[1].toUpperCase() === "B" || code.length < 2);
console.log("Done");

false
true
TypeError: Cannot read properties of undefined (reading 'toUpperCase')

A boolean on its own only shows true or false. To make the program do something different, you need a statement that runs some lines only when a condition is true. Choosing which code runs based on a condition is called selection, and the basic tool for it is the if statement.

if (condition) {
  statements that run only when the condition is true
}

A condition is the expression that decides whether the block runs. When the program reaches the if, it works out the condition. If it is true, the statements in the block run in order, and then the program carries on after the closing }. If it is false, the whole block is skipped and the program goes straight on after the }. Either way, the lines after the block always run.

const temperature: number = 31;
console.log(`It is ${temperature} degrees.`);
if (temperature > 30) {
  console.log("It is hot today.");
  console.log("Drink plenty of water.");
}
console.log("Have a good day!");

It is 31 degrees.
It is hot today.
Drink plenty of water.
Have a good day!

Now vary the temperature, and change nothing else:

const temperature: number = 24;
console.log(`It is ${temperature} degrees.`);
if (temperature > 30) {
  console.log("It is hot today.");
  console.log("Drink plenty of water.");
}
console.log("Have a good day!");

It is 24 degrees.
Have a good day!

24 > 30 is false, so the program skips lines 4 and 5 entirely, and goes from line 3 straight to line 7. This is the first program you have seen where some lines do not run. The code is identical apart from one value; only the condition’s answer differs.

You may meet code that leaves out the braces when the block is a single line, such as if (temperature > 30) console.log("Hot");. That works, but only for exactly one statement, and adding a second line later silently leaves it outside the if. This course always writes the braces.

const temperature: number = 31;
if (temperature > 30) {
  const advice = "Drink plenty of water.";
}
console.log(advice);

advice-scope.ts:5:13 - error TS2304: Cannot find name 'advice'.

const balance: number = 40;
const price: number = 25;
if (balance >= price) {
  console.log("Purchase approved.");
}
if (balance - price < 20) {
  console.log("Your balance is low.");
}
if (price > balance) {
  console.log("Not enough money.");
}
console.log(`Balance: ${balance}`);

Purchase approved.
Your balance is low.
Balance: 40

An if alone handles “do this, or do nothing.” Often you need “do this, otherwise do that”: take an umbrella, otherwise leave it at home. And some decisions have more than two outcomes: free shipping, cheap shipping, or full price.

Adding else and a second block after an if gives the program two paths. When the condition is true, the if block runs; when it is false, the else block runs. Exactly one of the two always runs, never both and never neither.

const chanceOfRain: number = 70;
if (chanceOfRain >= 50) {
  console.log("Take an umbrella.");
} else {
  console.log("Leave the umbrella at home.");
}

Take an umbrella.

70 >= 50 is true, so the first block runs and the else block is skipped. With chanceOfRain set to 20, the condition would be false, and only the else block would run. Notice the layout: } else { on one line, which closes the first block and opens the second.

Day 3 promised a way to deal with indexOf giving -1. Here it is: test for -1, and do something sensible in each case.

const fullName: string = "Cher";
const space = fullName.indexOf(" ");
if (space === -1) {
  console.log(`One name: ${fullName}`);
} else {
  console.log(`First: ${fullName.slice(0, space)}`);
  console.log(`Last: ${fullName.slice(space + 1)}`);
}

One name: Cher

"Cher" has no space, so space is -1, the condition is true, and the program says so instead of slicing the name into nonsense, as it did in 3.8. With "Ada Lovelace", space would be 3, the condition false, and the else block would show the two parts.

For more than two outcomes, put another if straight after else. else if (condition) adds another question that is asked only when every condition above it was false. An if, any number of else ifs, and an optional final else together make an if chain. The program asks the conditions from the top, one at a time; the first one that is true has its block run, and the rest of the chain is skipped. If none is true, the else block runs.

const orderTotal: number = 42.5;
let shipping: number;
if (orderTotal >= 50) {
  shipping = 0;
} else if (orderTotal >= 25) {
  shipping = 4.99;
} else {
  shipping = 7.99;
}
console.log(`Order: $${orderTotal.toFixed(2)}`);
console.log(`Shipping: $${shipping.toFixed(2)}`);

Order: $42.50
Shipping: $4.99

const score: number = 95;
if (score >= 60) {
  console.log("Grade: D");
} else if (score >= 70) {
  console.log("Grade: C");
} else if (score >= 90) {
  console.log("Grade: A");
} else {
  console.log("Grade: F");
}

Grade: D

const orderTotal: number = 42.5;
let shipping: number;
if (orderTotal >= 50) {
  shipping = 0;
} else if (orderTotal >= 25) {
  shipping = 4.99;
}
console.log(`Shipping: $${shipping.toFixed(2)}`);

shipping-no-else.ts:8:27 - error TS2454: Variable 'shipping' is used before being assigned.

const speed: number = 64;
const limit: number = 50;
const over = speed - limit;
if (over <= 0) {
  console.log("No ticket");
} else if (over <= 10) {
  console.log("Warning");
} else if (over <= 20) {
  console.log("Small fine");
} else {
  console.log("Large fine");
}
console.log(`Over by ${over}`);

Small fine
Over by 14

const daysLate: number = 3;
let fine: number;
if (daysLate > 7) {
  fine = 5;
} else if (daysLate > 0) {
  fine = daysLate * 0.5;
}
console.log(`Fine: $${fine.toFixed(2)}`);

library-fine.ts:8:23 - error TS2454: Variable 'fine' is used before being assigned.

const daysLate: number = 3;
let fine: number;
if (daysLate > 7) {
  fine = 5;
} else if (daysLate > 0) {
  fine = daysLate * 0.5;
} else {
  fine = 0;
}
console.log(`Fine: $${fine.toFixed(2)}`);

Fine: $1.50

So far every condition has been a boolean. But a program often wants to ask a simpler question: “is there anything here?” Did the person type a nickname, or leave it empty? JavaScript lets you put any value in a condition, and decides whether it counts as true or false.

A value that counts as false in a condition is falsy. There are exactly six to remember:

(JavaScript has a few rarer falsy values, such as -0, that this course does not use.) Every other value is truthy: it counts as true. That includes every number except zero, so -1 is truthy, and every string with at least one character, so "0", " ", and even "false" are truthy.

Why these six? Each one means “nothing” or “no answer” in its own type: no number, no text, no value. So if (nickname) reads as “if there is a nickname.” To see how a value will count, use Boolean(value), which converts any value to true or false the same way a condition does, just as Day 2’s Number() and String() convert to numbers and strings.

console.log(Boolean(false), Boolean(0), Boolean(""));
console.log(Boolean(null), Boolean(undefined), Boolean(NaN));
console.log(Boolean(42), Boolean(-1), Boolean("0"));
console.log(Boolean(" "), Boolean("false"), Boolean(true));

false false false
false false false
true true true
true true true

Now put a string straight into a condition, and into ||:

const nickname: string = "";
if (nickname) {
  console.log(`Hi, ${nickname}!`);
} else {
  console.log("Hi, guest!");
}
const shownName = nickname || "guest";
console.log(shownName);
console.log(`[${nickname && nickname.toUpperCase()}]`);
const friend: string = "Kim";
console.log(friend || "guest");
console.log(friend && friend.toUpperCase());

Hi, guest!
guest
[]
Kim
KIM

The empty nickname is falsy, so line 2’s condition counts as false and the else block runs. Lines 7 to 12 show something new about && and ||: they do not always give a boolean. They give back one of their two sides, whichever one decided the answer:

With booleans on both sides, this is exactly the truth table from 4.4. With other values, name || "guest" is a short way to say “the name, or "guest" if it is empty,” and the result has the type string.

Day 2 also promised ways to check for two special values. NaN is falsy, but so is 0, so if (!seats) cannot tell a failed conversion from a real zero. And NaN is the one value that is not equal to anything, not even itself, so === NaN never works; the checker reports it:

const seats = Number("forty");
console.log(seats === NaN);

nan-equals.ts:2:13 - error TS2845: This condition will always return 'false'.

The full report even adds a hint below the code: Did you mean 'Number.isNaN(seats)'?. Number.isNaN(value) is a function that gives true only when value is NaN. For null, typeof cannot help (typeof null is "object"), but === can, because null is equal to itself. Fix or delete nan-equals.ts, then:

const seats = Number("forty");
if (Number.isNaN(seats)) {
  console.log("That is not a number.");
} else {
  console.log(`Seats: ${seats}`);
}
const middleName = null;
console.log(middleName === null);
console.log(typeof middleName);

That is not a number.
true
object

Number("forty") is NaN, so Number.isNaN(seats) is true, and the program reports the bad text instead of doing arithmetic with it. Line 8 checks for null directly with ===, and line 9 shows why typeof would not have worked. A variable that holds a number or null needs a type from Day 9, which also shows how to check it; for now, know that === null is the way.

const volume: number = 0;
const level = volume || 50;
console.log(`Volume: ${level}`);

Volume: 50

let score: number = 75;
if (score = 100) {
  console.log("Perfect score!");
}
console.log(score);

Perfect score!
100

const items: number = 0;
const note: string = " ";
const label: string = "";
if (items) {
  console.log("Items in cart");
}
if (note) {
  console.log("Note added");
}
if (!label) {
  console.log("No label");
}
console.log(label || "untitled");
console.log(Boolean("0"));

Note added
No label
untitled
true

A shopping cart should say 1 item but 3 items. With an if chain, choosing one of two words takes six lines:

const itemCount: number = 3;
let word: string;
if (itemCount === 1) {
  word = "item";
} else {
  word = "items";
}
console.log(`${itemCount} ${word} in your cart`);

3 items in your cart

That works, but all it does is pick one of two values. For exactly this job, JavaScript has an operator that picks a value in one expression: the conditional operator, condition ? a : b. It works out the condition; if it is truthy, the whole expression gives a, otherwise it gives b. (It is also called the ternary operator, because it is the only operator with three parts.)

condition ? valueIfTrue : valueIfFalse

const itemCount: number = 1;
const word = itemCount === 1 ? "item" : "items";
console.log(`${itemCount} ${word} in your cart`);
const points: number = 7;
console.log(`${points} is ${points % 2 === 0 ? "even" : "odd"}`);

1 item in your cart
7 is odd

Use the conditional operator when you are choosing between two values. When each choice needs to do several things, such as show two lines or change two variables, use an if chain. And although you can put one conditional operator inside another, the result is hard to read; three or more choices belong in an if chain.

const count: number = 1;
console.log("You have " + count === 1 ? "one item" : "several items");

cart-message-wrong.ts:2:13 - error TS2367: This comparison appears to be unintentional because the types 'string' and 'number' have no overlap.

const count: number = 1;
console.log("You have " + (count === 1 ? "one item" : "several items"));

You have one item

const age: number = 12;
const ticket = age < 13 ? "child" : "adult";
const price = age < 13 ? 6 : 10;
console.log(`${ticket}: $${price}`);
const temperature: number = -3;
console.log(temperature < 0 ? "Freezing" : "Above freezing");
console.log(`${age >= 18 ? "Can" : "Cannot"} vote`);

child: $6
Freezing
Cannot vote

A traffic light program checks one value, light, against three fixed choices: "green", "yellow", and "red". An if chain works, but it repeats light === on every rung. When a program compares one value with a list of fixed values, the switch statement says it more directly.

switch (value) {
  case choice1:
    statements
    break;
  case choice2:
    statements
    break;
  default:
    statements
}

const light: string = "yellow";
switch (light) {
  case "green":
    console.log("Go");
    break;
  case "yellow":
    console.log("Slow down");
    break;
  case "red":
    console.log("Stop");
    break;
  default:
    console.log("Unknown light");
}
console.log("Done");

Slow down
Done

What does break really do? A matching case is only a starting point: the program runs every statement from there on, down through the following cases, until it meets a break or the end of the switch. Running on into the next case is called fall-through. Usually you stop it with break, but you can use it on purpose to give several cases the same statements:

const day: string = "sunday";
switch (day) {
  case "saturday":
  case "sunday":
    console.log("Weekend");
    break;
  default:
    console.log("Weekday");
}

Weekend

"sunday" matches line 4. Line 3’s case "saturday": has no statements of its own, so it falls through to the same lines: both days run line 5, then break. Stacking cases like this is the switch way of writing ||.

const light: string = "yellow";
switch (light) {
  case "green":
    console.log("Go");
    break;
  case "yellow":
    console.log("Slow down");
  case "red":
    console.log("Stop");
    break;
  default:
    console.log("Unknown light");
}
console.log("Done");

Slow down
Stop
Done

const light = "yellow";
switch (light) {
  case "green":
    console.log("Go");
    break;
  case "yellow":
    console.log("Slow down");
    break;
  case "red":
    console.log("Stop");
    break;
}

light-literal.ts:3:8 - error TS2678: Type '"green"' is not comparable to type '"yellow"'.
light-literal.ts:9:8 - error TS2678: Type '"red"' is not comparable to type '"yellow"'.

const size: string = "m";
switch (size) {
  case "s":
    console.log("Small");
    break;
  case "m":
  case "l":
    console.log("Medium or large");
  case "xl":
    console.log("Extra large");
    break;
  default:
    console.log("Unknown size");
}

Medium or large
Extra large

A cinema charges $6 for children under 12, $7 for people 65 and over, and $10 for everyone else. On Tuesdays every ticket is $2 off, and on weekends $1 more. A member code gives $1 off, and teenagers from 13 to 17 get free popcorn. Before you type it, make sure npx tsc is clean in your day04 folder: fix or delete any broken file from today.

const age: number = 15;
const typedDay: string = " Tuesday ";
const memberCode: string = "";

const day = typedDay.trim().toLowerCase();
let price: number;
if (age < 12) {
  price = 6;
} else if (age >= 65) {
  price = 7;
} else {
  price = 10;
}

switch (day) {
  case "tuesday":
    price = price - 2;
    break;
  case "saturday":
  case "sunday":
    price = price + 1;
    break;
}

const discount = memberCode ? 1 : 0;
const isTeen = age >= 13 && age <= 17;
console.log(`Ticket: $${(price - discount).toFixed(2)}`);
console.log(isTeen ? "Teen ticket: free popcorn!" : "Enjoy the film!");
console.log(`Member code: ${memberCode || "none"}`);

npx tsc reports no errors, and node cinema.ts shows:

Ticket: $8.00
Teen ticket: free popcorn!
Member code: none

Follow the values in the order the lines run:

Each tool does the job it fits best. The if chain sorts every customer into exactly one price band, with else catching everyone not in a narrow band, so the checker knows price is always assigned by line 15. The switch compares one value, day, with fixed choices, and stacks saturday and sunday; it has no default, because on other days the price does not change. The two conditional operators pick one of two values, and line 29’s || gives a default for an empty code. Change the three values on lines 1 to 3, such as 70, " SUNDAY", and "M123", and only the output changes.

Today’s messages and silent surprises in one place. The first group comes from npx tsc; the second shows no message at all.

• Comparison operators give true or false, after the arithmetic is worked out. Use strict equality, === and !==; == converts types first and surprises people. Strings compare character by character, so "10" < "9".
• TS2367 means the two sides have types with no overlap, so the comparison can never be true. Convert the value, or annotate a constant that stands for a value that could vary: const day: string = "Sunday";.
• && needs both sides, || at least one, and ! flips. && comes before ||, and short-circuit evaluation skips the right side when the left decides, so put safety checks first.
• An if chain runs the block of the first true condition and skips the rest, with else catching everything else. A variable declared inside a block exists only there.
• false, 0, "", null, undefined, and NaN are falsy; every other value is truthy. a || b gives a if it is truthy, otherwise b. Check NaN with Number.isNaN and null with === null.
• condition ? a : b picks one of two values, and switch compares one value with fixed cases, falling through until a break.

Do these in your day04 folder. First make sure npx tsc prints nothing there: if any broken file from today is still in the folder (such as loose-equals.ts, today.ts, weekday-wrong.ts, shipping-no-else.ts, light-literal.ts, or the questions’ predict-overlap.ts and library-fine.ts), fix it or delete it. Then type each program yourself, check it with npx tsc, run it with node, and only then open the answer. Change the starting values and run them again, including values right on a boundary, such as exactly 90.

const score: number = 89.5;
if (score < 0 || score > 100) {
  console.log(`${score} is not a valid score.`);
} else if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else if (score >= 60) {
  console.log("Grade: D");
} else {
  console.log("Grade: F");
}

Grade: B

const year: number = 1900;
let isLeap: boolean;
if (year % 400 === 0) {
  isLeap = true;
} else if (year % 100 === 0) {
  isLeap = false;
} else if (year % 4 === 0) {
  isLeap = true;
} else {
  isLeap = false;
}
console.log(isLeap ? `${year} is a leap year.` : `${year} is not a leap year.`);

1900 is not a leap year.

const year: number = 2024;
const isLeap = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
console.log(`${year}: ${isLeap}`);

2024: true

const typedCommand: string = "  Hours ";
const command = typedCommand.trim().toLowerCase();
switch (command) {
  case "hours":
    console.log("Open 8:00 to 18:00, Monday to Saturday.");
    break;
  case "price":
    console.log("A coffee costs $3.50.");
    break;
  case "wifi":
    console.log("The network is CafeGuest.");
    break;
  default:
    console.log(`Unknown command: ${command}`);
    console.log("Try hours, price, or wifi.");
}

Open 8:00 to 18:00, Monday to Saturday.

const hours: number = 5;
const isWeekend: boolean = true;
const hasPass: boolean = false;
let fee: number;
if (hasPass) {
  fee = 0;
} else if (hours <= 1) {
  fee = 2;
} else if (hours <= 4) {
  fee = hours * 1.5;
} else {
  fee = 8;
}
if (isWeekend && !hasPass) {
  fee = fee + 1;
}
console.log(`Fee: $${fee.toFixed(2)}`);
console.log(fee > 5 ? "Pay at the machine" : "Pay at the gate");

Fee: $9.00
Pay at the machine

const day: string = "sunday";
if (day === "saturday" && day === "sunday") {
  console.log("Weekend rate");
} else {
  console.log("Weekday rate");
}

weekend-rate.ts:2:27 - error TS2367: This comparison appears to be unintentional because the types '"saturday"' and '"sunday"' have no overlap.

const day: string = "sunday";
if (day === "saturday" || day === "sunday") {
  console.log("Weekend rate");
} else {
  console.log("Weekday rate");
}

Weekend rate

const coupon: string = "";
const owner: string = "Ravi";
console.log(coupon || "no coupon");
console.log(owner && owner.toUpperCase());
console.log(`[${coupon && coupon.toUpperCase()}]`);
console.log(owner.length > 3 && coupon.length > 3);

no coupon
RAVI
[]
false

const dayNumber: number = 9;
switch (dayNumber % 7) {
  case 0:
    console.log("Sunday");
    break;
  case 6:
    console.log("Saturday");
    break;
  default:
    console.log("Weekday");
}
console.log(dayNumber % 7 === 2 ? "Tuesday" : "Not Tuesday");

Weekday
Tuesday

MDN’s guide walks through if...else and switch with more examples, and its page on falsy values lists every falsy value, including the rare ones: MDN: Control flow and error handling (read the “Conditional statements” part) and MDN: Falsy.

Check each statement. If the answer is “not yet,” reread the linked subsection.

• I can compare numbers and strings with >, <, >=, and <=, and predict the result. Reread
• I can explain why === is used instead of ==. Reread
• I can read a TS2367 message and fix the comparison it points at. Reread
• I can combine conditions with &&, ||, and !, using parentheses when I mix them. Reread
• I can use short-circuit evaluation to keep a risky check from running. Reread
• I can write an if statement and say which lines run. Reread
• I can turn a rule written in English into an if chain in the right order. Reread
• I can name the falsy values and predict what || gives back. Reread
• I can pick one of two values with the conditional operator. Reread
• I can write a switch with break and default, and explain fall-through. Reread