Foundation F02 · Lesson 01

Values, Types, Comparisons, and Control Flow

≈ 3 min · beginner prerequisite
Objectives

By the end

  • JavaScript has primitive values and objects; variables bind names to values.
  • Strict equality avoids coercion surprises in most application code.
  • Truthy/falsy rules are useful but should not replace explicit domain checks when 0, empty string, or false are valid data.

Values, Types, Comparisons, and Control Flow

Why this matters JavaScript has primitive values and objects; variables bind names to values. This lesson is intentionally framework-light. You are building a mental model that will be reused when Next.js, NestJS, Prisma, TanStack Query, and deployment tooling add more vocabulary. The goal is not to memorize definitions. The goal is to predict what the computer will do and know where to look when reality differs from that prediction.

Mental model • JavaScript has primitive values and objects; variables bind names to values. • Strict equality avoids coercion surprises in most application code. • Truthy/falsy rules are useful but should not replace explicit domain checks when 0, empty string, or false are valid data. • if/switch/loops express decisions; readable control flow is more valuable than clever one-liners.

Step-by-step walkthrough 1. Write the concept in your own words before using a tool. If your explanation depends on framework jargon, simplify it one level. 2. Create the smallest runnable example that demonstrates only this concept. Keep it outside the main TaskFlow repository if experimentation could create noise. 3. Predict the result before running the command or clicking the UI. Prediction makes the output evidence instead of entertainment. 4. Run it and capture what actually happened: terminal output, browser state, request details, or file changes. 5. Change one assumption and repeat. Try an invalid input, wrong path, missing field, reordered data, or other safe failure relevant to the topic. 6. Explain the difference between the successful and failing runs. That explanation is the transferable skill.

TaskFlow connection Later in the course, javascript foundations i stops being an isolated topic and becomes infrastructure for real features. When you encounter values, types, comparisons, and control flow again, ask which layer owns it, what its inputs are, what output proves success, and what failure evidence is available. That prevents you from copying framework snippets without understanding the underlying browser, runtime, operating-system, or language behavior.

Guided exercise Create a tiny example from scratch without copying the final code from a tutorial. Keep the example under about 30–50 lines where possible. After it works, deliberately break one assumption. Write the exact symptom and the smallest fix. Then delete the experiment or commit it in a dedicated practice folder so it does not pollute production project structure.

Check your understanding • Can you describe the concept without naming a framework? • Can you point to the exact input and output? • Can you name one common incorrect assumption? • Can you reproduce the idea in a tiny example? • Can you diagnose one intentional failure using evidence rather than guesses?

Instructor note Do not rush because the syntax looks easy. Most difficult full-stack bugs are not caused by forgetting syntax; they come from an incorrect model of ownership, execution environment, identity, time, or data flow. The foundation track exists so later lessons can move quickly without becoming mysterious.

Hands-on foundation studio

Predict → build → run → break → explain

Objectives

  • Use Values, Types, Comparisons, and Control Flow in a runnable example rather than only describing it.
  • Predict a result before execution and compare prediction with evidence.
  • Introduce one safe failure and diagnose the cause systematically.

Setup

  1. Create or reuse a disposable practice folder so experiments do not pollute the production TaskFlow tree.
  2. Open the terminal and editor side-by-side. Keep browser DevTools visible for browser work.
  3. Write the expected behavior in one sentence before adding code.

Do the work

  1. 01

    Build the smallest runnable example for “Values, Types, Comparisons, and Control Flow”, predict its output, change one assumption, and explain the difference using concrete evidence.

  2. 02

    Run the smallest version first. Capture exact terminal/browser/database output before adding a second concept.

  3. 03

    Change one input, ordering, state transition, or configuration assumption. Predict the new output, then run it.

  4. 04

    Explain the result in terms of runtime behavior, data flow, identity, or ownership—not “the framework did it”.

  5. 05

    Rebuild the example once without looking at the completed version.

jsGuided practice: Manipulate TaskFlow data with plain JavaScript
const tasks = [
  { id: 1, title: "Learn JavaScript", done: true },
  { id: 2, title: "Build TaskFlow", done: false },
];

const openTitles = tasks
  .filter(task => !task.done)
  .map(task => task.title);

console.log(openTitles);

Type it, predict it, run it, then change one assumption. The goal is not finishing the snippet; the goal is being able to explain the result.

Expected evidence

  • The example runs from a documented command or browser action.
  • Observed output matches a prediction you wrote before execution.
  • The controlled failure produces a specific, explainable symptom.
  • After the fix, the original reproduction passes again.

Intentional failure

Deliberately violate one assumption relevant to “Values, Types, Comparisons, and Control Flow”. Keep the failure small enough that you can identify a single causal change.

Explain it back

  1. What is the simplest accurate explanation of Values, Types, Comparisons, and Control Flow?
  2. Which input/state is the source of truth?
  3. What exact evidence distinguishes success from accidental success?
  4. What failure did you reproduce and how did you isolate it?
Checkpoint

You can continue when you can reproduce the core behavior of “Values, Types, Comparisons, and Control Flow” from a blank file or clean state and explain one failure without reopening the finished solution.

Practice before completion

Small experiment, intentional failure, explain-back

Build the smallest example that demonstrates this lesson. Then break one relevant assumption and diagnose it using terminal/DevTools evidence. Finally explain the concept without using a framework name.