Next ❯

JavaScript Control Flow Overview

  • This lesson introduces the concept of control flow in JavaScript.

  • What is Control Flow ?

    Control Flow refers to the order in which statements in a program are executed.

    In simple words:

    Control Flow decides which code runs, when it runs, and how many times it runs.

    Without control flow, a program would always run from top to bottom, with no decision-making ability.

    Default Flow of a Program

    By default, JavaScript executes code:

    • Line by line

    • From top to bottom

    • One statement after another

Understanding Control Flow

Explains how JavaScript runs code step by step in default order. 

// Default execution flow (top to bottom)

console.log("Start");
console.log("Processing");
console.log("End");

  • This is called sequential execution.

    Why Do We Need Control Flow ?

    Real-world programs are not always linear.

    Programs often need to:

    • Make decisions

    • Repeat actions

    • Execute code based on conditions

    • Stop or skip execution

    • Handle different scenarios

    Control flow enables all of this.

    Real-Life Example

    Imagine traffic signals:

    • If the light is green → move

    • If the light is red → stop

    • If the light is yellow → slow down

    This decision-making is similar to control flow in programming.

    What Control Flow Controls

    Control flow determines:

    • Which statement executes next

    • Whether a block of code executes or not

    • How many times a block runs

    • When the program exits a loop or condition

    Types of Control Flow in JavaScript

    JavaScript control flow is broadly divided into the following categories:

    1. Sequential Control Flow

    2. Conditional Control Flow (Decision Making)

    3. Looping Control Flow (Iteration)

    4. Jump / Branching Statements

    5. Exception Control Flow (Error Handling)

  • Sequential Control Flow

    This is the default execution flow.

    Statements execute one after another in the order written.

Sequential Execution Flow

Code runs step by step in the same order it is written. 

// Sequential flow

let a = 10;
let b = 20;
let sum = a + b;

console.log(sum); // 30

  • Each line waits for the previous line to finish.

    Conditional Control Flow

    Conditional control flow allows the program to make decisions.

    Execution depends on whether a condition is true or false.

    Common statements:

    • if

    • if...else

    • else if

    • switch

Conditional Control Flow

Code execution changes based on conditions like true or false. 

// Conditional flow using if-else

let age = 18;

if (age >= 18) {
  console.log("Eligible to vote");
} else {
  console.log("Not eligible to vote");
}

  • The program executes only one block based on the condition.

    Looping Control Flow

    Looping control flow allows a block of code to run multiple times.

    Common loops:

    • for

    • while

    • do...while

Looping Control Flow

Runs the same block of code repeatedly using loops. 

// Looping using for loop

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

  • The loop runs until the condition becomes false.

    Jump / Branching Statements

    These statements change the normal flow of execution.

    Common jump statements:

    • break

    • continue

    • return

Control Flow Jump Statements

Alters the normal flow by stopping or skipping iterations in loops. 

// Using break to stop loop

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    break;
  }
  console.log(i);
}

  • The break statement exits the loop early.

    Exception Control Flow (Error Handling)

    This control flow handles runtime errors gracefully.

    Keywords:

    • try

    • catch

    • finally

    • throw

Exception Handling Flow

Manages runtime errors using try and catch to prevent crashes. 

// Handling errors using try-catch

try {
  let x = y + 10; // y is not defined
} catch (error) {
  console.log("An error occurred");
}

  • The program does not crash and continues execution.

    Control Flow and Program Logic

    Control flow is the foundation of program logic.

    Using control flow, programs can:

    • Respond to user input

    • Validate data

    • Handle errors

    • Perform repetitive tasks

    • Implement business rules

    Control Flow vs Sequential Execution

    AspectSequentialControl Flow
    ExecutionAlways linearCan change direction
    DecisionsNot possiblePossible
    RepetitionNot possiblePossible
    Real-world usageVery limitedEssential

    Common Mistakes

    • Forgetting conditions inside if

    • Creating infinite loops

    • Misusing break and continue

    • Writing deeply nested conditions

    • Not understanding execution order

    Best Practices

    • Keep conditions simple and readable

    • Avoid deeply nested control structures

    • Use meaningful variable names

    • Comment complex logic

    • Test all possible conditions

Next ❯