Control flow: design clear decisions with if, else if and switch

Learn how to model business decisions with clean branches, avoid chaotic nesting and debug conditions so your code takes the right path every time.

How much do you know about JavaScript?

📘 Theory

Types of decisions in real frontend work

Not every condition should be solved the same way. Picking the right structure simplifies everything.

A simple rule usually fits in an `if`. When you have several routes ordered by priority, `else if` works better. If you compare the same value against many discrete cases, `switch` is often the cleanest option.

The goal of this block is to stop improvising structures and start designing the flow with intention.

if

For quick binary decisions.

Authenticated user or guest
Valid field or invalid field

else if

For ordered priorities or ranges.

Classify a grade: excellent, pass, fail
Determine a risk level

switch

For discrete states.

Order state: pending, shipped, delivered
Role: admin, editor, visitor

Guard clauses

Exit early when preconditions are not met.

Avoid deep nesting
Improve readability and debugging

if and else if: order rules by priority

When several conditions might match, the order matters a lot.

JavaScript evaluates from top to bottom and runs the first true condition. If you place a broad rule first, it may block more specific rules below it.

In business logic, it is usually better to start with critical or restrictive cases and then move toward broader ones.

Think about evaluation order, not just isolated conditions.
Name variables with business meaning such as `openMinutes` or `priority`.
Avoid nested `if` blocks when an `else if` chain can express the rule more clearly.

switch: ideal for closed sets of states

If you compare one variable against many specific values, switch is often easier to read.

`switch` stands out when you work with UI states, notification types, payment methods or roles. Each `case` becomes an explicit business branch.

Do not forget `break`, or the execution may fall into the next case by accident.

Guard clauses: less nesting, more clarity

Reject invalid cases first and keep the happy path clean.

A guard clause is an early return from a function when the preconditions are not met. It is a very professional pattern because it lowers cognitive load.

When you reach longer functions in javascript-funciones-basico, this pattern will save you many headaches.

Frequent flow mistakes and how to debug them

If the result is wrong, the bug is usually in the condition or its order.

Error one: broad conditions placed too early. Error two: forgetting `break` in a `switch`. Error three: comparing mixed types without normalizing the input first.

Recommended debugging method: print the input value, its type and the chosen branch so you can trace the exact execution path.

1 Types of decisions in real frontend work 2 if and else if: order rules by priority 3 switch: ideal for closed sets of states 4 Guard clauses: less nesting, more clarity 5 Frequent flow mistakes and how to debug them

🧭 Key visuals

Conditionals in JavaScript

It shows execution paths based on business conditions.

Flow diagram using if, else if and else branches

A basic decision tree

It reinforces the mental model of a conditional as a split in the program flow before you write longer chains of `if` and `else if`.

Visual decision tree with one condition and two possible branches depending on whether it passes or fails

🧪 Learn by doing

Example Guided example: switch for payment method Map each method to a UX message using `switch` plus `default`.

⌄

Example Interactive demo: route support tickets Choose a ticket type and urgency, and the system will decide the queue and estimated response time.

⌄

🏁 Challenges

Challenge Challenge 1: access validation by age Build a flow that handles invalid values first and then decides access.

⌄

Challenge Challenge 2: subscription plan switch Assign benefits by plan using `switch` and a `default` fallback.

⌄

🧰 Resources

Useful links

javascript.info: if, else if javascript.info: switch MDN: Control flow and error handling MDN: if...else MDN: switch MDN: break

Test

Check your knowledge with a test about JavaScript.

Test for JavaScript

Course resources 62

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 07

Operators in JavaScript: think like the engine to make better decisions

Lesson 09

Loops in JavaScript: repeat work without breaking logic or performance

›