SESSION 019 — Conditionals

CONCEPTS.UNLOCKED

🔀

Conditional Logic

if, else if, else — your code makes decisions. If a condition is true, run this block. Otherwise, run a different block. The foundation of all program logic.

⚖

Comparison Operators

=== (strict equal), !== (strict not equal), >, <, >=, <=. Each returns true or false.

Logical Operators

&& (AND — both must be true), || (OR — either can be true), ! (NOT — flips true↔false). Combine simple conditions into complex logic.

⚠

The == vs === Trap

"5" == 5 is true (type coercion!). "5" === 5 is false (strict comparison). Always use === — loose equality causes subtle, maddening bugs.

👻

Truthy & Falsy

Falsy: 0, "" (empty string), null, undefined, NaN, false. Everything else is truthy. if (username) checks if username exists and isn't empty.

🧱

Nesting vs Combining

Nesting conditions (if inside if) works but gets messy. Combining with && / || is often cleaner: if (isValid && isSmallEnough).

HANDS-ON.TASKS

Find the Upload Bug

▶

Read the upload validation code. Find the bug — it uses == instead of === and compares against the wrong MIME type:

// Bug: file.type is "image/jpeg" (string)
// comparing incorrectly:
if (file.type == "image/jpg") {
  // Wrong! MIME type is "image/jpeg", not "image/jpg"

Two bugs in one line: wrong comparison operator AND wrong MIME type string. "image/jpg" doesn't exist — the correct MIME type is "image/jpeg". This is exactly the kind of subtle bug that costs teams hours.

Fix the File Type Check

▶

const validTypes = ["image/jpeg", "image/png", "image/webp"];

if (validTypes.includes(file.type)) {
  // proceed with upload
} else {
  console.error("Invalid file type:", file.type);
}

Using an array + .includes() is better than chaining || comparisons — easier to read and extend.

Add Size Validation

▶

const maxSizeMB = 25;
const maxSizeBytes = maxSizeMB * 1024 * 1024;

if (file.size > maxSizeBytes) {
  console.warn(
    `File too large: ${(file.size / 1024 / 1024).toFixed(1)}MB (max ${maxSizeMB}MB)`
  );
}

Template literals (backtick strings) let you embed expressions with ${...}. Much cleaner than string concatenation with +.

Handle Edge Cases

▶

What if no file was selected? What if the file has zero size?

Think about every way this could fail — then handle each case.

Write Multi-Level Validation

▶

if (!file) {
  console.error("No file selected");
} else if (!validTypes.includes(file.type)) {
  console.error(
    `Invalid type: ${file.type}. Accepted: JPEG, PNG, WebP`
  );
} else if (file.size > maxSizeBytes) {
  console.error(
    `File too large: ${(file.size/1024/1024).toFixed(1)}MB. Max: ${maxSizeMB}MB`
  );
} else {
  console.log("File valid! Proceeding...");
}

Each condition is checked in order. The first match wins. This pattern — early return for invalid cases, happy path at the end — is called "guard clauses." Professional developers use this constantly.

CS.DEEP-DIVE

Boolean algebra and truth tables.

Every if statement evaluates a boolean expression. && (AND) is true only if BOTH sides are true. || (OR) is true if EITHER side is true.

// These are the EXACT operations implemented
// in silicon logic gates inside your CPU:

AND gate  → output = 1 only if both inputs = 1
OR gate   → output = 1 if either input = 1
NOT gate  → flips 0↔1

// Your processor is literally billions of
// tiny if-statements (AND, OR, NOT gates)
// evaluating boolean expressions billions
// of times per second.

// De Morgan's Laws (useful for simplifying):
!(A && B) === (!A || !B)
!(A || B) === (!A && !B)

REF.MATERIAL

ARTICLE

Making Decisions in Code — Conditionals — MDN

Mozilla Developer Network

Complete guide to if/else, comparison operators, logical operators, and switch statements in JavaScript.

CONDITIONALSMDNREFERENCE

VIDEO

JavaScript if/else — Web Dev Simplified

Web Dev Simplified

Clear walkthrough of conditionals, comparisons, truthy/falsy, and common patterns for beginners.

CONDITIONALSPRACTICAL

ARTICLE

Comparisons — javascript.info

javascript.info

Deep dive into == vs ===, type coercion rules, and why strict equality prevents bugs. Interactive examples.

EQUALITYTYPE COERCION

TOOL

JavaScript Equality Table

dorey

Visual table comparing == and === for every type combination. See why == is dangerous — the results are shocking.

EQUALITYVISUAL

VIDEO

Boolean Logic & Logic Gates — Computerphile

Computerphile

How AND, OR, NOT gates work in silicon and how they connect to the boolean algebra you write in JavaScript.

BOOLEANHARDWARECS

CONDITIONALS & VALIDATION