Unit Project: Decisions and Loops Lab

Unit Project: Decisions and Loops Lab | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 28 MIN OF ACTIVE PRACTICE

Learn Unit Project: Decisions and Loops Lab step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Design mutually understandable branches and boundaries.
Use guard clauses to protect the normal path.
Choose for, for...of, while, or array methods by intent.
Prove that a loop advances toward termination.

DEEP EXPLANATION

Build the complete mental model

A branch is a written business rule

Conditions should reveal the policy rather than merely produce the right answer for one example. Start with invalid inputs and exceptional exits, then let the main path remain visible. Order matters when ranges overlap: a score of 90 satisfies both score >= 70 and score >= 90, so the more specific boundary must be handled first. Write examples immediately below, at, and above every threshold before implementing the branch.

Loop form should match the question

Use for...of when you need each value from an iterable. Use a classic for loop when the index and its update are part of the algorithm. Use while when repetition depends on changing state rather than a known collection. Array methods express common questions: map transforms, filter selects, find returns one match, some and every answer booleans, and reduce combines. Do not choose reduce merely because it can imitate every other loop.

Termination and mutation are loop invariants

A loop needs a starting state, continuation condition, update, and invariant that remains true. For while loops, identify the value that moves toward the exit and show why it cannot move away forever. Mutating the array being traversed can skip values because indexes shift. Prefer a new result collection, or iterate over a copy when removal is genuinely required. Add explicit iteration limits around external or uncertain processes.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Order overlapping ranges correctly

Invalid values leave first, then the highest boundary is tested before broader lower ranges.

function grade(score) {
  if (!Number.isFinite(score) || score < 0 || score > 100) return "invalid";
  if (score >= 90) return "excellent";
  if (score >= 70) return "solid";
  return "review";
}

[69, 70, 89, 90, 101].forEach((score) => console.log(score, grade(score)));

Example 2: Make a while loop's progress visible

remaining decreases on every iteration, so the condition must eventually become false for a finite non-negative input.

function countdown(start) {
  if (!Number.isInteger(start) || start < 0) throw new TypeError("Invalid start");
  let remaining = start;
  while (remaining > 0) {
    console.log(remaining);
    remaining -= 1;
  }
  console.log("done");
}

How to trace this lesson

List invalid cases, exceptional cases, and the normal case before writing if.
Test one value on each side of every threshold.
For a loop, name the initial state, condition, update, and exit state.
After iteration, verify the source collection was not changed unintentionally.

Common mistakes and corrections

Testing a broad lower boundary before a higher one.: Order overlapping ranges from the most specific rule or use non-overlapping conditions.
Using for...in to visit array values.: Use for...of for values; for...in enumerates property keys.
Writing while without proving progress.: Identify and test the state change that makes the condition false.

PRACTICE LADDER

Move from recognition to independent work

1
Build a shipping policy and test six exact boundaries.
2
Rewrite one loop with an expressive array method and compare clarity.
3
Repair an infinite loop and explain its termination argument.
4
Group scores into valid categories without mutating the input.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Branches should make business rules visible

Order conditions from invalid or exceptional cases toward the normal result. Guard clauses shorten the main path and prevent later calculations from running with bad data. When conditions overlap, write boundary examples first so greater-than and greater-than-or-equal choices are intentional.

Choose iteration from the data you have

for...of visits values from an iterable, array methods express common transformations, and while fits repetition controlled by a changing condition. Every loop needs a clear source, an exit, and a reason it cannot run forever. Avoid changing the collection you are currently traversing unless that mutation is the explicit algorithm.

RUNNABLE EXAMPLE

Change one assumption at a time

Test shipping totals directly below, at, and above 500. Add a non-Morocco country and explain which branch returns first.

function shippingCost(total, country) {
  if (!Number.isFinite(total) || total < 0) {
    throw new TypeError("Invalid order total");
  }
  if (country !== "MA") return 15;
  if (total >= 500) return 0;
  return 35;
}

for (const total of [120, 500, 840]) {
  console.log(total, shippingCost(total, "MA"));
}

function shippingCost(total, country) {
  if (!Number.isFinite(total) || total < 0) {
    throw new TypeError("Invalid order total");
  }
  if (country !== "MA") return 15;
  if (total >= 500) return 0;
  return 35;
}

for (const total of [120, 500, 840]) {
  console.log(total, shippingCost(total, "MA"));
}

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

let count = 3;
while (count > 0) {
  console.log(count);
}

Reveal repair and explanation

let count = 3;
while (count > 0) {
  console.log(count);
  count -= 1;
}

The loop condition never changed, so it remained true. Identify the state that moves every while loop toward its exit.

INDEPENDENT LAB

Build without copying the example

Summarize valid scores into pass, review, and invalid groups without mutating the input array.

function summarizeScores(scores) {
  // Return { pass, review, invalid }.
}

function summarizeScores(scores) {
  // Return { pass, review, invalid }.
}

Press Run to execute your code.

Self-review checklist Boundary scores are covered by tests. Invalid values cannot silently enter a valid group. The input array remains unchanged.What did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. Which loop is designed to visit iterable values? for...of for...in switch

2. What must a while loop make clear? How state moves toward the exit That it always runs once That it mutates an array

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering