⚡ Module 03 — JavaScript Core⏱️ 45-55 Min Practical Guide🛠️ Real JS Execution Engine

Conditions & Loops — Controlling Application Logic

How modern web applications evaluate user state, branch execution paths, validate API payloads, and efficiently iterate across data structures using conditions, truthiness, and foundational loops.

🔀

1. Conditional Logic — Making Decisions

Programs cannot deliver useful software without branching based on dynamic real-world inputs.

Architectural ConceptControl Flow

Why Software Requires Decisions

A static script runs sequentially from line 1 to line 100 without deviation. But dynamic web applications must react differently depending on who is visiting, what data was submitted, and what system state prevails.

When a user submits a form, the backend checks: Is their session token active? Is their payment card valid? Does the requested product have remaining inventory? Conditions give software the ability to choose pathways.

Realistic Application Scenarios

🔐 Authentication Guard

if (user.isLoggedIn) {
  showDashboard();
} else {
  redirectToLogin();
}

Controls whether protected private routes and customer data are displayed or redirected to the auth gateway.

🏷️ E-Commerce Discount Engine

if (orderTotal >= 100) {
  discount = orderTotal * 0.15; // 15% off
} else if (orderTotal >= 50) {
  discount = orderTotal * 0.05; // 5% off
} else {
  discount = 0;
}

Multi-tier evaluation applies bulk discounts dynamically based on current cart thresholds.

🛡️ Server API Request Validation

if (request.body && request.body.email && request.body.password) {
  continueProcessing(request.body);
} else {
  returnError({ status: 400, message: "Missing required registration credentials" });
}

Defensive guard prevents runtime crashes by verifying payload integrity before database access.

Comparison & Logical Operators Summary

Operator	Meaning	Example	Result
===	Strict Equal (value & type)	5 === 5	true
==	Loose Equal (coerces types ⚠️)	5 == "5"	true (unsafe!)
!==	Strict Not Equal	role !== "admin"	true if role is not admin
&&	Logical AND (both must be true)	isPaid && hasStock	true if both hold
\|\|	Logical OR (either can be true)	isAdmin \|\| isModerator	true if at least one matches
!	Logical NOT (inverts boolean)	!isLocked	true if isLocked is false

The Ternary Operator: Inline Value Decisions

When you only need to assign or return one of two values based on a condition, the ternary operator condition ? exprIfTrue : exprIfFalse is clean and concise:

// Concise inline assignment
const statusBadge = user.isOnline ? "Active" : "Away";
const deliveryFee = orderTotal >= 50 ? 0 : 5.99;

⚖️

2. Truthy & Falsy Values in Practice

JavaScript coerces values into booleans when encountered in conditional contexts.

Core PrincipleECMAScript Boolean Coercion

The 6 Canonical Falsy Values

In JavaScript, any expression evaluated inside an if (x) block is converted to a boolean. Exactly 6 values always evaluate to false:

false

0

""

null

undefined

NaN

Everything else is TRUTHY — including non-empty strings, all numbers other than zero, [] (empty array), and {} (empty object).

🔬 Interactive Truthy & Falsy Explorer

Click any value below to see how JavaScript evaluates it in an if (val) condition:

❌ FALSY

Type: string (length 0)

Empty strings are falsy. Form inputs that the user left blank evaluate to "" and fail if (input) checks.

📝 Form Input Verification

function validateForm(username) {
  if (username) {
    // User typed something
    submitForm();
  } else {
    showError("Username is required");
  }
}

An empty string "" evaluates to falsy, making simple presence validation fast and clean.

📡 API Data & Optional Fields

function renderProfile(user) {
  // Check if optional bio exists
  if (user.bio) {
    renderBioText(user.bio);
  } else {
    renderPlaceholder("No bio provided yet.");
  }
}

If user.bio is null or undefined, it safely falls back without throwing errors.

🔄

3. Loops — Repetition & Iteration

The three fundamental loops developers actually use in production JavaScript.

The Three Pillars of Loop Lifecycle

Every repetition mechanism in programming depends on three core stages:

Pillar 1

Initialization

let i = 0;

Sets up a starting counter or pointer before the loop executes its first cycle.

Pillar 2

Condition

i < items.length;

Tested before each iteration. As long as it remains true, execution continues.

Pillar 3

Iteration (Update)

i++

Advances the counter after each cycle so the loop eventually reaches termination.

1. Standard for Loop (Index-Driven)

const users = ["Alice", "Bob", "Charlie"];

for (let i = 0; i < users.length; i++) {
  console.log(`User #${i + 1}: ${users[i]}`);
}

Best when you need the numeric index i to access adjacent items or step by custom increments.

2. while Loop (State-Driven)

let retries = 0;
let success = false;

while (!success && retries < 3) {
  success = attemptApiCall();
  retries++;
}

Best when the number of cycles is unknown in advance and depends on an external state or polling condition.

3. for...of Loop (Modern Iterable)

const products = [
  { name: "Laptop", price: 999 },
  { name: "Mouse", price: 29 }
];

for (const p of products) {
  console.log(`${p.name}: $${p.price}`);
}

The modern gold standard for iterating directly over array objects without index bookkeeping.

Controlling Loop Flow: break vs continue

🛑 break — Exit Loop Early

Terminates the loop completely. Used when searching for an item; once found, there is no need to examine the remaining 10,000 records.

for (const user of users) {
  if (user.id === targetId) {
    foundUser = user;
    break; // Stop searching immediately!
  }
}

⏭️ continue — Skip to Next Iteration

Immediately aborts the current cycle and skips to the next item in the collection without terminating the entire loop.

for (const order of orders) {
  if (order.isArchived) {
    continue; // Skip archived orders
  }
  processActiveOrder(order);
}

⚠️ Note on for...in vs for...of: While for...of iterates over array values, for...in iterates over object property keys. Never use for...in on arrays, as it yields string index keys ("0", "1") and can introduce subtle string concatenation bugs.

🧩

4. Conditions + Loops Together

How real full-stack application logic combines iteration and decision-making on real data collections.

Real ArchitectureData Pipeline

Processing Structured Entity Collections

In production, backend services and client applications receive arrays of objects from databases and APIs. Your code repeats over the collection (loop) and applies business rules to each item (condition).

orders-processor.jsJavaScript

const orders = [
  { id: 1, status: "paid", total: 1200 },
  { id: 2, status: "pending", total: 800 },
  { id: 3, status: "paid", total: 500 }
];

let totalRevenue = 0;
let pendingCount = 0;

for (const order of orders) {
  if (order.status === "paid") {
    totalRevenue += order.total; // Accumulate revenue
    console.log(`Processing fulfillment for Order #${order.id}`);
  } else if (order.status === "pending") {
    pendingCount++; // Count awaiting payment
  }
}

console.log("Total Collected Revenue: $" + totalRevenue); // $1700
console.log("Orders Pending Payment:", pendingCount);    // 1

Notice how for...of traverses every order, while if / else if selectively categorizes the order, accumulating metrics without modifying the underlying data source.

💻

5. Real Code Practice Lab — "Order Processor"

Write and execute genuine JavaScript in your browser to process a multi-order dataset.

Main Practical ActivityOrder Processor Engine

Challenge Objectives: Loop through the orders array. (1) Collect names of customers with status === "paid" and sum their total into paidTotal. (2) Count orders with status === "pending" into pendingCount. (3) Push any order with total >= 1000 into highValueOrders. Run your code to observe the report!

JAVASCRIPT EDITOR (EDITABLE)ES6 / ECMAScript

// 📦 Order Processor — Full Stack Application Logic
// Write your loop and conditions below to process the orders dataset.

const orders = [
  { id: 101, customer: "Sarah Connor", status: "paid", total: 1250 },
  { id: 102, customer: "Devon Miles", status: "pending", total: 450 },
  { id: 103, customer: "Alex Mercer", status: "paid", total: 820 },
  { id: 104, customer: "Maria Hill", status: "cancelled", total: 310 },
  { id: 105, customer: "Liam Vance", status: "paid", total: 1600 },
  { id: 106, customer: "Chloe Decker", status: "pending", total: 950 }
];

// Accumulators and collectors
let paidTotal = 0;
let pendingCount = 0;
const paidCustomers = [];
const highValueOrders = [];

// 👉 Task 1: Loop through all orders using 'for...of' or standard 'for'
// 👉 Task 2: Check if status is "paid":
//            - Add customer name to paidCustomers array
//            - Add order.total to paidTotal
// 👉 Task 3: If status is "pending", increment pendingCount
// 👉 Task 4: If order.total is >= 1000, add { id, customer, total } to highValueOrders

for (const order of orders) {
  // TODO: Add your conditional logic here
}

console.log("=== ORDER PROCESSING SUMMARY ===");
console.log("Paid Customers:", paidCustomers.join(", "));
console.log("Total Paid Revenue: $" + paidTotal);
console.log("Pending Orders Count:", pendingCount);
console.log("High-Value Orders (>= $1000):", highValueOrders);

BROWSER CONSOLE TERMINALLive Execution Output

Click "▶ Run Code" to execute your JavaScript in the sandbox.

🐞

6. Debugging & Common Mistakes Sandbox

Examine real broken code snippets, observe the runtime error or bug, and test the corrected implementation.

1. Using = (Assignment) Instead of === (Strict Equality)

⚠️ BUGGY CODE

The Issue: Using single equals = in an if condition assigns the value rather than checking it, making the expression evaluate to the assigned string (which is truthy).

// ⚠️ Buggy: Assigns "admin" instead of comparing!
const user = { username: "guest_user", role: "viewer" };

if (user.role = "admin") {
  console.log("Access Granted: Admin privileges enabled for", user.username);
} else {
  console.log("Access Denied: Standard view only.");
}

console.log("User role after check:", user.role); // ⚠️ Mutated to "admin"!

🔍 Why this happens:

The single equals operator (=) is the assignment operator. Writing `if (user.role = "admin")` mutates `user.role` to "admin" and evaluates to "admin", which is truthy. Hence, every user unintentionally becomes an administrator.

🎓

7. Mini Challenge — "Process Student Results"

Follow the Full Stack engineering lifecycle: Understand → Code → Run → Test → Validate.

🏆

Student Performance Metric Analyzer

A school management portal requires a reporting script that evaluates final student grades and attendance records. Write the logic to loop through all students and satisfy the following business requirements:

✅ Pass Rule: marks >= 50 AND attendance >= 75

❌ Fail Rule: marks < 50 OR attendance < 75

🌟 High Marks: identify students with marks >= 85

📊 Class Average: calculate the arithmetic mean marks

STUDENT PROCESSOR SCRIPTchallenge.js

// 🎓 Mini Challenge: Process Student Results
// Evaluate exam marks and attendance records across the class.

const students = [
  { id: 101, name: "Aarav", marks: 88, attendance: 92 },
  { id: 102, name: "Zara", marks: 45, attendance: 80 },
  { id: 103, name: "Liam", marks: 95, attendance: 96 },
  { id: 104, name: "Maya", marks: 52, attendance: 65 },
  { id: 105, name: "Rohan", marks: 76, attendance: 85 }
];

// Requirements:
// 1. Pass condition: marks >= 50 AND attendance >= 75
// 2. High marks: marks >= 85
// 3. Count failed students
// 4. Calculate class average marks

let passedCount = 0;
let failedCount = 0;
let highMarksCount = 0;
let totalMarks = 0;
const highAchievers = [];

// 👉 Write your loop and conditions below:
for (const s of students) {
  totalMarks += s.marks;

  // Check pass or fail
  if (s.marks >= 50 && s.attendance >= 75) {
    passedCount++;
  } else {
    failedCount++;
  }

  // Check high marks
  if (s.marks >= 85) {
    highMarksCount++;
    highAchievers.push(s.name);
  }
}

const averageMarks = totalMarks / students.length;

console.log("=== CLASS PERFORMANCE REPORT ===");
console.log("Passed Students:", passedCount);
console.log("Failed Students:", failedCount);
console.log("High Achievers (>= 85):", highAchievers.join(", "));
console.log("Class Average Marks:", averageMarks.toFixed(1));

// Return summary object for automated validation
return { passedCount, failedCount, highMarksCount, averageMarks };

TERMINAL & VALIDATIONAutomated Test Runner

Click "▶ Run & Validate Tests" to verify your solution.

🎯

8. Mental Model & Mastery Quiz

Reinforce foundational control flow principles and evaluate your full-stack readiness.

🧠 The Full Stack Control Flow Mental Model

Every feature you build across frontend components and backend APIs maps directly into this fundamental execution architecture:

📦

1. Data Input

Array of entities from API/DB

➔

🔄

2. Loop Traversal

for...of visits each element

➔

🔀

3. Condition Check

if / else evaluates criteria

➔

⚙️

4. Process / Accumulate

Aggregate sums, flags, counts

➔

📊

5. Response / Render

Emit summary or render UI

Conditions (Decision Making)

Use if, else if, and else with strict equality === to branch execution safely without coercion bugs.

Logical Operators

&& (AND), || (OR), and ! (NOT) enable multi-condition decision trees and safe short-circuit property guarding.

Modern Iteration

Prefer for...of for array values, for when index tracking is needed, and while when repeating until a dynamic condition is met.

Self-Assessment

Knowledge Check: Conditions & Loops

Test your grasp of JavaScript control flow, truthiness, strict equality, and loop mechanics.

Question 1 of 6Score: 0

Why should Full Stack developers consistently use strict equality (===) instead of loose equality (==) when checking application conditions?