Control Flow
## Learning Objectives
- Master conditional statements (if, else, switch)
- Understand loop constructs (for, while, do-while)
- Learn about break, continue, and labeled statements
## If...Else Statements
### Basic Syntax
```javascript
if (condition) {
// code block executed if condition is true
}
```
### If...Else
```javascript
const age = 18;
if (age >= 18) {
console.log("You are an adult");
} else {
console.log("You are a minor");
}
```
### If...Else If...Else
```javascript
const score = 85;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 80) {
console.log("Grade: B");
} else if (score >= 70) {
console.log("Grade: C");
} else {
console.log("Grade: F");
}
```
### Ternary Operator
```javascript
const status = age >= 18 ? "adult" : "minor";
// Multiple conditions
const grade = score >= 90 ? "A"
: score >= 80 ? "B"
: score >= 70 ? "C"
: "F";
```
## Switch Statement
### Switch Syntax
```javascript
switch (expression) {
case value1:
// code block
break;
case value2:
// code block
break;
default:
// code block (no match)
}
```
### Example
```javascript
const day = "Monday";
switch (day) {
case "Monday":
case "Tuesday":
case "Wednesday":
case "Thursday":
case "Friday":
console.log("Weekday");
break;
case "Saturday":
case "Sunday":
console.log("Weekend");
break;
default:
console.log("Invalid day");
}
```
### Fall-through Behavior
```javascript
// Each case falls through to the next if no break
const fruit = "apple";
switch (fruit) {
case "apple":
console.log("Selected apple");
// Falls through!
case "banana":
console.log("Selected banana");
break;
}
```
## For Loops
### Traditional For Loop
```javascript
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
```
### For...In Loop (Object Properties)
```javascript
const person = { name: "Alice", age: 30, city: "NYC" };
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// name: Alice
// age: 30
// city: NYC
```
### For...Of Loop (Iterable Values)
```javascript
const colors = ["red", "green", "blue"];
for (let color of colors) {
console.log(color);
}
// red
// green
// blue
// With index
for (let [index, color] of colors.entries()) {
console.log(`${index}: ${color}`);
}
```
### forEach Method
```javascript
const numbers = [1, 2, 3];
numbers.forEach(function(number, index) {
console.log(`${index}: ${number}`);
});
numbers.forEach((number, index) => {
console.log(`${index}: ${number}`);
});
```
## While Loops
### While Loop
```javascript
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
```
### Do...While Loop
```javascript
let count = 0;
do {
console.log(count);
count++;
} while (count < 5);
// Executes at least once, even if condition is false
let x = 10;
do {
console.log(x);
} while (x < 10); // Prints 10 once
```
## Loop Control
### Break
```javascript
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // Exit the loop entirely
}
console.log(i); // 0, 1, 2, 3, 4
}
```
### Continue
```javascript
for (let i = 0; i < 5; i++) {
if (i === 2) {
continue; // Skip this iteration
}
console.log(i); // 0, 1, 3, 4
}
```
### Labeled Statements
```javascript
outerLoop: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (i === 1 && j === 1) {
break outerLoop; // Breaks outer loop
}
console.log(`i=${i}, j=${j}`);
}
}
```
## Exception Handling
```javascript
try {
// Code that might throw an error
const result = riskyOperation();
} catch (error) {
// Handle the error
console.error("Error occurred:", error.message);
} finally {
// Always executes
console.log("Cleanup code");
}
```
## Summary
- Use `if...else` for simple conditional logic
- Use `switch` when comparing one value against multiple cases
- Use `for` loops when you know the iteration count
- Use `while` loops when the iteration count is unknown
- Use `for...of` for iterating over arrays and iterable objects
- Use `for...in` for iterating over object properties
- Use `break` and `continue` to control loop execution
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →