Loop Commons
W1Week 1 of 4

State Tracing

Track variables through programs. Predict output before running.

The skill: Computational empathy. Think like the machine thinks.

Time: 5-6 hours total

This week uses: Variables · Assignment (=) · console.log() · Strings · Numbers · Arithmetic (+, -, *, /) · String concat (+) · if/else · Comparison (==, ===, <, >) · for loop · while loop · Arrays [] · Modulo (%)

Covered in Lesson 1. If any feel unfamiliar, review before continuing.

Your progress0 / 16 complete

Estimated time remaining: 5-6 hours

The Format

  1. 1. Read the code
  2. 2. Trace the state (fill in the table)
  3. 3. Predict the output
  4. 4. Reveal the answer
  5. 5. Reflect — where did your mental model break?

The state table is the artifact. It externalizes the mind's model of execution.

Exercise 1.1: Variable Assignment

Variables hold values. Assignment copies the right side into the left. Values can change.

1Exercise 1.1.1

Simple Assignment

1 / 16
javascript
1let a = 5;
2let b = 10;
3let c = a;
4console.log(a, b, c);
Stepabc

What will this code print? Commit to your answer before revealing.

2Exercise 1.1.2

Reassignment

2 / 16
javascript
1let x = 1;
2x = 2;
3x = 3;
4console.log(x);
Stepx

What will this code print? Commit to your answer before revealing.

3Exercise 1.1.3

Copying vs. Linking

3 / 16
javascript
1let first = 100;
2let second = first;
3first = 200;
4console.log(first, second);
Stepfirstsecond

What will this code print? Commit to your answer before revealing.

Exercise 1.2: Arithmetic and String Operations

Expressions evaluate right-to-left. Operators have precedence. `+` with strings concatenates.

4Exercise 1.2.1

Basic Arithmetic

4 / 16
javascript
1let a = 10;
2let b = 3;
3let sum = a + b;
4let diff = a - b;
5let product = a * b;
6console.log(sum, diff, product);
Stepabsumdiffproduct

What will this code print? Commit to your answer before revealing.

5Exercise 1.2.2

Order of Operations

5 / 16
javascript
1let result = 2 + 3 * 4;
2let other = (2 + 3) * 4;
3console.log(result, other);
Stepresultother

What will this code print? Commit to your answer before revealing.

6Exercise 1.2.3

String Concatenation

6 / 16
javascript
1let greeting = "Hello";
2let name = "World";
3let message = greeting + " " + name;
4console.log(message);
Stepgreetingnamemessage

What will this code print? Commit to your answer before revealing.

7Exercise 1.2.4

Mixed Types (Bonus Challenge)

7 / 16
javascript
1let x = "3";
2let y = 2;
3let a = x + y;
4let b = y + y;
5console.log(a, b);
Stepxyab

What will this code print? Commit to your answer before revealing.

Exercise 1.3: Conditional Branching

Code doesn't always run top-to-bottom. Conditions choose paths. Only one path executes.

8Exercise 1.3.1

Simple If/Else

8 / 16
javascript
1let temperature = 75;
2let message;
3 
4if (temperature > 80) {
5  message = "Hot";
6} else {
7  message = "Not hot";
8}
9 
10console.log(message);
SteptemperaturemessageBranch taken

What will this code print? Commit to your answer before revealing.

9Exercise 1.3.2

Chained Conditions

9 / 16
javascript
1let score = 85;
2let grade;
3 
4if (score >= 90) {
5  grade = "A";
6} else if (score >= 80) {
7  grade = "B";
8} else if (score >= 70) {
9  grade = "C";
10} else {
11  grade = "F";
12}
13 
14console.log(grade);
StepscoregradeBranch taken

What will this code print? Commit to your answer before revealing.

10Exercise 1.3.3

Truthiness

10 / 16
javascript
1let username = "";
2let status;
3 
4if (username) {
5  status = "Logged in";
6} else {
7  status = "Guest";
8}
9 
10console.log(status);
StepusernamestatusBranch taken

What will this code print? Commit to your answer before revealing.

Epistemic humility moment: JavaScript's truthiness rules are notoriously confusing. Even experienced programmers look them up. Know this is a place where your intuition might fail.

Exercise 1.4: Loop Iteration

Loops repeat. The iteration variable changes. The loop stops when the condition fails.

11Exercise 1.4.1

Counting Loop

11 / 16
javascript
1for (let i = 0; i < 3; i++) {
2  console.log(i);
3}
Iterationi (start)Conditioni (after ++)

What will this code print? Commit to your answer before revealing.

12Exercise 1.4.2

Accumulator Pattern

12 / 16
javascript
1let sum = 0;
2 
3for (let i = 1; i <= 4; i++) {
4  sum = sum + i;
5}
6 
7console.log(sum);
Iterationisum (before)sum (after)

What will this code print? Commit to your answer before revealing.

13Exercise 1.4.3

While Loop

13 / 16
javascript
1let count = 5;
2 
3while (count > 0) {
4  console.log(count);
5  count = count - 1;
6}
Iterationcount (start)Outputcount (end)

What will this code print? Commit to your answer before revealing.

Exercise 1.5: Mixed Tracing

Combine all concepts. Real programs mix variables, arithmetic, conditions, and loops.

14Exercise 1.5.1

Loop with Conditional

14 / 16
javascript
1for (let i = 1; i <= 5; i++) {
2  if (i % 2 === 0) {
3    console.log(i + " is even");
4  }
5}
ii % 2ConditionOutput

What will this code print? Commit to your answer before revealing.

15Exercise 1.5.2

Multiple Accumulators

15 / 16
javascript
1let evens = 0;
2let odds = 0;
3 
4for (let i = 1; i <= 6; i++) {
5  if (i % 2 === 0) {
6    evens = evens + i;
7  } else {
8    odds = odds + i;
9  }
10}
11 
12console.log("Evens:", evens, "Odds:", odds);
ii % 2evens (after)odds (after)

What will this code print? Commit to your answer before revealing.

16Exercise 1.5.3

Find the Maximum

16 / 16
javascript
1let numbers = [3, 7, 2, 9, 4];
2let max = numbers[0];
3 
4for (let i = 1; i < numbers.length; i++) {
5  if (numbers[i] > max) {
6    max = numbers[i];
7  }
8}
9 
10console.log(max);
inumbers[i]max (before)Conditionmax (after)

What will this code print? Commit to your answer before revealing.

Computational empathy moment: This pattern — initialize, then iterate — is fundamental. The machine needs a starting point before it can compare.

← Back to Month 1Week 2: Bug Hunting →