× Full Screen Image

JavaScript Control Flow

Why should you care about JavaScript Control Flow?

Control flow is how your code makes decisions. Once you understand it, you can build smarter logic instead of running the same path every time.

Conditional statements let your code make decisions. They check a condition and run different blocks depending on whether that condition is true or false. Think of them like traffic signals for your program.

If

javascript

let x = 5;
if (x > 0) {
  console.log("x is positive");
}

Here, the if statement checks whether x is greater than 0. If true, the code inside the block runs. If false, JavaScript skips it. You can pair this with an else statement to handle the other case.

ifelse

javascript

let x = 5;
if (x > 0) {
  console.log("x is positive");
} else {
  console.log("x is not positive");
}

In this version, one path runs when the condition is true, and the other path runs when it is false. For multiple checks, use else if so JavaScript can test conditions in order.

ifelseifelse

javascript

let x = 5;
if (x > 10) {
  console.log("x is greater than 10");
} else if (x > 0) {
  console.log("x is greater than 0 but less than or equal to 10");
} else {
  console.log("x is less than or equal to 0");
}

One important rule: else and else if cannot stand on their own. They must come after an if. Without that starting condition, JavaScript throws an error.

javascript

//For instance, this structure won't work because the else if is not preceded by an if statement:
else if (condition) {
  // code block
}

//Similarly, standalone else statements without an if won't function either:

else {
  // code block
}
Data Types

Sometimes one condition is not enough. You can combine conditions using && (AND) and || (OR). With &&, both conditions must be true.

javascript

let x = 5;
if (x > 0 && x < 10) {
  console.log('x is between 0 and 10');
}

The || operator (logical OR) returns true if at least one of the conditions is true. If both conditions are false, the expression will evaluate to false. For example:

javascript

let x = 30;
if (x < 0 || x > 10) {
  console.log('x is not between 0 and 10');
}

These are short-circuit operators. JavaScript stops evaluating as soon as it can determine the final result. For example, with &&, if the first condition is false, it does not evaluate the second one.

Sometimes you need one decision inside another decision. That is called nesting. It helps you break complex logic into smaller, readable steps.

javascript

if (x > 0) {
  if (x < 10) {
    console.log('x is between 0 and 10');
  } else {
    console.log('x is greater than or equal to 10');
  }
} else {
  console.log('x is less than or equal to 0');
}

First, JavaScript checks if x is greater than 0. If true, it checks the inner condition. If the inner condition fails, the inner else runs. If the outer condition fails at the start, JavaScript goes directly to the outer else block.

  • if runs a block only when a condition is true.
  • else handles the alternative path when the condition is false.
  • else if helps test multiple conditions in sequence.
  • You can combine conditions with && and ||.
  • Nested conditionals help organize complex decision logic.

What's next? Continue to Loops and Switch to learn how to repeat logic efficiently.

  • What is control structure in programming?
  • What is conditional statement in programming?
  • Explain the purpose and syntax of the if statement in JavaScript. How is it used to execute code conditionally based on a specified condition?
  • Describe the role of the else statement in JavaScript. When is it used, and what happens when the condition in the if statement evaluates to false?
  • Explain the else if statement in JavaScript. How does it differ from if and else statements, and when might you use it in your code?
  • Explain how you can group multiple conditions using logical operators (AND, OR) within an if statement in JavaScript. Provide examples of using logical operators to combine conditions.
  • Describe the concept of nested if-else statements in JavaScript. When is nesting used, and can you provide an example demonstrating nested conditional logic?
  • Compare and contrast the if, else if, else statements, and nested if-else structures in terms of their usage and scenarios where each is most appropriate.
lecture javascript
SimplyJavaScript Logo
Conditional Statements In Javascript
lecture javascript
SimplyJavaScript Logo
Conditional Statements In Javascript
Operators
Loops & Switch