Home » JavaScript » Control Flow
Category:

Control Flow

Control Flow

JavaScript if else Statement Tutorial with Examples

written by utmoker71

The if…else statement in JavaScript is one of the most fundamental control flow structures used to execute code based on conditions.

It allows you to execute a block of code if a specified condition is true and, optionally, another block if the condition is false.

You can also chain multiple conditions using else if.

In this tutorial, you'll learn:

What is an if…else statement?
Basic syntax of if, else, and else if
Nested if…else statements
Using logical operators with if…else
Practical examples of if…else usage

1. What is an if…else Statement?

An if…else statement is a control flow statement that executes code only if a certain condition is met.

The condition is evaluated as either true or false, and based on that result, the corresponding block of code runs.

2. Basic Syntax of if, else, and else if

The syntax of if…else is straightforward:

if Statement

The if statement executes a block of code if the condition evaluates to true.

Syntax:

if (condition) {
  // Code to execute if the condition is true
}

if…else Statement

The else block is optional and will execute if the condition in the if statement evaluates to false.

Syntax:

if (condition) {
  // Code to execute if the condition is true
} else {
  // Code to execute if the condition is false
}

else if Statement

You can chain multiple conditions using else if. It allows you to check additional conditions if the first condition is false.

Syntax:

if (condition1) {
  // Code to execute if condition1 is true
} else if (condition2) {
  // Code to execute if condition1 is false and condition2 is true
} else {
  // Code to execute if both condition1 and condition2 are false
}

3. Using the if…else Statement

Example 1: Basic if Statement

let age = 18;

if (age >= 18) {
  console.log("You are an adult.");
}

In this example:

If age is greater than or equal to 18, the message “You are an adult.” is printed.
Since age is 18, the condition evaluates to true, and the message is logged.

Example 2: if…else Statement

let age = 16;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

In this example:

If age is greater than or equal to 18, “You are an adult.” is printed.
If not, “You are a minor.” is printed because the else block handles the false condition.

Example 3: Using else if for Multiple Conditions

let 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: D");
}

In this example:

The code checks the value of score and assigns a grade based on the range.
Since score is 85, the “Grade: B” message is printed.

4. Nested if…else Statements

You can nest if…else statements inside other if…else blocks to evaluate more complex logic.

Example 4: Nested if…else Statements

let age = 22;
let hasDrivingLicense = true;

if (age >= 18) {
  if (hasDrivingLicense) {
    console.log("You can drive.");
  } else {
    console.log("You need a driving license to drive.");
  }
} else {
  console.log("You are too young to drive.");
}

In this example:

The outer if checks whether age is at least 18.
Inside the first block, a nested if checks if the person has a driving license.
Depending on the conditions, different messages are printed.

5. Using Logical Operators with if…else

You can combine multiple conditions using logical operators like && (AND) and || (OR).

Example 5: Using Logical AND (&&)

let age = 22;
let hasDrivingLicense = true;

if (age >= 18 && hasDrivingLicense) {
  console.log("You can drive.");
} else {
  console.log("You cannot drive.");
}

In this example:

Both conditions (age >= 18 and hasDrivingLicense) must be true for the “You can drive.” message to be printed.
If either condition is false, “You cannot drive.” is printed.

Example 6: Using Logical OR (||)

let age = 22;
let isStudent = true;

if (age < 18 || isStudent) {
  console.log("You are eligible for a discount.");
} else {
  console.log("You are not eligible for a discount.");
}

In this example:

The discount is applied if either age < 18 or isStudent is true.
Since isStudent is true, the message “You are eligible for a discount.” is printed.

6. Practical Examples of if…else Usage

Example 7: Simple Password Check

let password = "secret123";

if (password === "secret123") {
  console.log("Access granted.");
} else {
  console.log("Access denied.");
}

In this example:

If the password is correct, access is granted; otherwise, it is denied.

Example 8: Time-Based Greetings

let hour = new Date().getHours();

if (hour < 12) {
  console.log("Good morning!");
} else if (hour < 18) {
  console.log("Good afternoon!");
} else {
  console.log("Good evening!");
}

In this example:

The program checks the current hour and displays a time-appropriate greeting.

Example 9: Checking for a Valid Number

let num = "abc";

if (typeof num === "number" && !isNaN(num)) {
  console.log("This is a valid number.");
} else {
  console.log("This is not a valid number.");
}

In this example:

The code checks if num is a number and whether it’s not NaN (Not-a-Number).

Conclusion

The if…else statement is an essential control flow tool in JavaScript, allowing you to execute different code blocks based on various conditions.

Here’s a summary of what you’ve learned:

if executes a block of code if the condition is true.
else executes a block of code if the if condition is false.
else if allows you to check multiple conditions.
Logical operators like && (AND) and || (OR) can be used to combine conditions.
Nested if statements help you handle more complex logic.

By using these concepts, you can write flexible and dynamic programs that respond to a variety of conditions.

0 comment
0 FacebookTwitterPinterestEmail
Control Flow

JavaScript break Statement: A Complete Tutorial with Examples

written by utmoker71

The break statement in JavaScript is used to exit a loop (or a switch statement) immediately, even if the loop's condition is not yet false.

When the break statement is executed, the control flow jumps out of the loop or switch and continues executing the code that follows.

This is particularly useful when you want to stop the loop's execution based on certain conditions.

1. Using break in a for Loop

The break statement can be used in a for loop to stop the iteration when a certain condition is met.

Example 1: Breaking Out of a Loop

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break; // Exit the loop when i is 5
  }
  console.log(i);
}

Output

1
2
3
4

Explanation

The loop iterates from 1 to 10.
When i equals 5, the if condition is true, and the break statement is executed.
The loop stops, and control moves to the next part of the code outside the loop.
Only numbers 1 through 4 are printed to the console.

2. Using break in a while Loop

You can use the break statement inside a while loop to exit the loop when a specific condition is met.

Example 2: Exiting a while Loop

let count = 0;

while (true) {
  console.log(count);
  count++;

  if (count === 3) {
    break; // Exit the loop when count is 3
  }
}

Output

0
1
2

Explanation

The while loop runs indefinitely because the condition is set to true.
The loop prints the current value of count and increments it.
When count equals 3, the break statement is executed, and the loop is exited.
The loop stops before printing 3.

3. Using break in a do…while Loop

The break statement can also be used inside a do…while loop to exit based on a condition.

Example 3: Breaking Out of a do…while Loop

let i = 0;

do {
  if (i === 2) {
    break; // Exit the loop when i is 2
  }
  console.log(i);
  i++;
} while (i < 5);

Output

0
1

Explanation

The do…while loop runs at least once.
When i equals 2, the break statement is executed, stopping the loop.
The loop only prints 0 and 1.

4. Using break in a switch Statement

In a switch statement, the break statement is used to exit the switch block. Without a break, the program continues to execute the next case, which is known as “fall-through.”

Example 4: break in a switch Statement

let fruit = 'Apple';

switch (fruit) {
  case 'Apple':
    console.log('This is an apple.');
    break; // Exit the switch block
  case 'Banana':
    console.log('This is a banana.');
    break;
  case 'Cherry':
    console.log('This is a cherry.');
    break;
  default:
    console.log('Unknown fruit.');
}

Output

This is an apple.

Explanation

When fruit is ‘Apple', the first case is executed, printing ‘This is an apple.'.
The break statement exits the switch block, so the other cases are not executed.

5. Breaking Out of Nested Loops

In nested loops, the break statement only exits the innermost loop in which it is used. To break out of an outer loop, you need to use labeled loops.

Example 5: Breaking Out of the Inner Loop

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    if (j === 2) {
      break; // Exit the inner loop
    }
    console.log(`i = ${i}, j = ${j}`);
  }
}

Output

i = 1, j = 1
i = 2, j = 1
i = 3, j = 1

Explanation

The inner loop runs from j = 1 to j = 3.
When j equals 2, the break statement is executed, exiting the inner loop.
The outer loop continues to the next iteration.

Example 6: Breaking Out of an Outer Loop (Using Labels)

To break out of an outer loop, you can use a labeled statement.

outerLoop: for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    if (j === 2) {
      break outerLoop; // Exit the outer loop
    }
    console.log(`i = ${i}, j = ${j}`);
  }
}

Output

i = 1, j = 1

Explanation

outerLoop is a label for the outer for loop.
When j equals 2, the break outerLoop statement is executed, exiting the outer loop completely.
Only the first pair of i = 1, j = 1 is printed.

6. Using break with Arrays

Example 7: Finding an Element in an Array

You can use the break statement to stop searching through an array once the desired element is found.

let numbers = [1, 2, 3, 4, 5];
let target = 3;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === target) {
    console.log(`Found ${target} at index ${i}`);
    break; // Exit the loop once the element is found
  }
}

Output

Found 3 at index 2

Explanation

The loop iterates through the numbers array.
When the target (3) is found, the break statement exits the loop immediately, saving unnecessary iterations.

Summary

The break statement is a powerful tool for controlling the flow of loops and switch statements in JavaScript. It allows you to exit a loop or switch block when a certain condition is met, making your code more efficient and manageable.

Key Points

Loops: Use break to exit for, while, and do…while loops when a specific condition is satisfied.
switch Statements: Use break to prevent “fall-through” in switch statements.
Nested Loops: The break statement exits only the innermost loop. Use labels if you need to break out of outer loops.
Efficient Control: Use break to stop unnecessary iterations once the desired result is achieved.

When to Use break

When you want to stop a loop based on a condition.
When searching for an element in an array and want to stop as soon as it’s found.
When managing multiple cases in a switch statement.

By using the break statement effectively, you can write more efficient and clearer JavaScript code.

0 comment
0 FacebookTwitterPinterestEmail
Control Flow

JavaScript continue Statement: A Complete Tutorial with Examples

written by utmoker71

The continue statement in JavaScript is used within loops to skip the current iteration and move directly to the next one.

This is useful when certain conditions are met, and you want to bypass the rest of the code in the loop for that iteration.

The continue statement can be used in any of the loop structures: for, while, or do…while.

Syntax of continue

continue;

When the continue statement is encountered, the loop immediately jumps to the next iteration.

1. Using continue in a for Loop

The continue statement is often used in for loops to skip certain iterations.

Example 1: Skipping Even Numbers

for (let i = 1; i <= 10; i++) {
  // If the number is even, skip this iteration
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}

Output

1
3
5
7
9

Explanation

The loop iterates from 1 to 10.
The if condition checks if the current number i is even (i % 2 === 0). If true, continue is executed, skipping the rest of the loop body for that iteration.
As a result, only odd numbers are printed to the console.

Example 2: Using continue to Skip Specific Values

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue; // Skip the iteration when i is 3
  }
  console.log(i);
}
Output
1
2
4
5

Explanation

When i is 3, the continue statement is executed, skipping the console.log(i) statement.
The loop continues with the next iteration, effectively skipping the number 3.

2. Using continue in a while Loop

The continue statement can also be used inside a while loop to skip to the next iteration.

Example 3: Skipping Negative Numbers

let numbers = [1, -2, 3, -4, 5];
let index = 0;

while (index < numbers.length) {
  if (numbers[index] < 0) {
    index++;
    continue; // Skip the rest of the loop for negative numbers
  }
  console.log(numbers[index]);
  index++;
}

Output

1
3
5

Explanation

The while loop iterates through the numbers array.
If the current element (numbers[index]) is negative, the continue statement is executed.
This skips the console.log(numbers[index]) statement and moves to the next iteration.

3. Using continue in a do…while Loop

The continue statement also works with do…while loops, allowing you to skip the current iteration.

Example 4: Skipping Certain Values in a do…while Loop

let i = 0;
do {
  i++;
  if (i === 4) {
    continue; // Skip the iteration when i is 4
  }
  console.log(i);
} while (i < 6);

Output

1
2
3
5
6

Explanation

The do…while loop increments i and checks if i is 4.
When i is 4, the continue statement is executed, skipping the console.log(i) statement.
The loop continues to the next iteration without printing 4.

4. Using continue in Nested Loops

In nested loops, the continue statement only affects the innermost loop in which it is placed.

Example 5: Using continue in Nested Loops

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    if (j === 2) {
      continue; // Skip the iteration when j is 2
    }
    console.log(`i = ${i}, j = ${j}`);
  }
}

Output

i = 1, j = 1
i = 1, j = 3
i = 2, j = 1
i = 2, j = 3
i = 3, j = 1
i = 3, j = 3

Explanation

The continue statement is inside the inner loop (for j).
When j is 2, the continue statement is executed, skipping the console.log statement for that iteration of the inner loop.
The outer loop (for i) is not affected by the continue statement in the inner loop.

5. Skipping Over Certain Conditions with continue

Example 6: Skipping Over Non-Numeric Values in an Array

let items = [1, 'two', 3, 'four', 5];

for (let i = 0; i < items.length; i++) {
  if (typeof items[i] !== 'number') {
    continue; // Skip non-numeric values
  }
  console.log(items[i]);
}

Output

1
3
5

Explanation

The loop iterates over the items array.
The if statement checks if the current element is not a number. If true, the continue statement skips to the next iteration.
Only numeric values are printed to the console.

Summary

The continue statement is a handy tool for controlling the flow of loops in JavaScript. It allows you to skip the current iteration and move on to the next, which can be useful in various scenarios like filtering data, handling specific conditions, or controlling nested loops.

Key Points

The continue statement skips the remaining code in the current iteration and moves to the next iteration of the loop.
Works with all types of loops: for, while, and do…while.
In nested loops, continue affects only the innermost loop where it is used.
Useful for skipping unwanted iterations based on specific conditions.

Use Cases

Filtering: Skip specific elements in an array (e.g., non-numeric values, negative numbers).
Conditional Skipping: Control which iterations are processed in complex loops (e.g., nested loops).
Efficient Processing: Quickly skip over iterations that do not meet certain conditions.

By understanding how to use the continue statement effectively, you can write more efficient and readable loop structures in your JavaScript programs.

0 comment
0 FacebookTwitterPinterestEmail
Control Flow

JavaScript for Loop: A Complete Tutorial with Examples

written by utmoker71

The for loop is one of the most commonly used looping structures in JavaScript. It allows you to execute a block of code a specific number of times, based on a condition.

It is typically used when you know beforehand how many times you need to iterate.

Syntax of the for Loop

for (initialization; condition; finalExpression) {
  // Code to execute
}

Explanation

initialization: Sets up a variable that will be used in the loop.
condition: The loop will continue to run as long as this expression is true.
finalExpression: Executes after each iteration of the loop; usually used to update the loop variable.

1. Basic for Loop Example

Let’s start with a simple example that prints numbers from 1 to 5.

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

Output:

1
2
3
4
5

Explanation

Initialization: let i = 1 sets up a loop variable i starting at 1.
Condition: i <= 5 ensures that the loop runs as long as i is less than or equal to 5.
Final Expression: i++ increments i by 1 after each iteration.

2. for Loop with Arrays

The for loop is often used to iterate over arrays.

let fruits = ['apple', 'banana', 'cherry'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Output:

apple
banana
cherry

Explanation

The loop runs from i = 0 to i < fruits.length (which is 3 in this case).
Each element of the array is accessed using fruits[i].

3. Using for Loop with break

You can use the break statement to exit the loop prematurely based on a specific condition.

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break; // Exit the loop when i equals 5
  }
  console.log(i);
}

Output:

1
2
3
4

Explanation

The loop starts at i = 1 and increments i by 1 until it reaches 10.
When i equals 5, the break statement terminates the loop.

4. Using for Loop with continue

The continue statement skips the current iteration and moves to the next one.

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue; // Skip even numbers
  }
  console.log(i);
}

Output:

1
3
5
7
9

Explanation

The loop runs from i = 1 to i <= 10.
If i is even (i % 2 === 0), the continue statement skips printing that number.

5. Nested for Loops

You can use nested for loops to handle more complex tasks, such as printing a multiplication table.

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

Output:

1 * 1 = 1
1 * 2 = 2
...
5 * 4 = 20
5 * 5 = 25

Explanation

The outer loop iterates over i from 1 to 5.
The inner loop iterates over j from 1 to 5 for each i.
Each combination of i and j is printed as a product.

6. for Loop with Different Step Values

You can control how much the loop variable changes after each iteration. For example, you can decrement or increment by a different value.

for (let i = 10; i >= 0; i -= 2) {
  console.log(i);
}

Output:

10
8
6
4
2
0

Explanation

The loop starts at i = 10 and decrements i by 2 (i -= 2) after each iteration.
The loop stops when i is less than 0.

7. Looping Over Objects Using for…in

The for…in loop is used to iterate over the properties of an object.

let person = {
  name: 'John',
  age: 25,
  city: 'New York'
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

Output:

name: John
age: 25
city: New York

Explanation

The loop iterates over each key in the person object.
person[key] is used to access the value of each property.

8. Looping Over Arrays Using for…of

The for…of loop is used to iterate over iterable objects like arrays and strings.

let colors = ['red', 'green', 'blue'];

for (let color of colors) {
  console.log(color);
}

Output:

red
green
blue

Explanation

The loop iterates directly over the elements of the colors array.
Each element is stored in the variable color and logged to the console.

9. for Loop with Conditions in Initialization and Final Expression

You can use more complex logic in the initialization and final expressions.

let start = 1, end = 20;

for (; start <= end; start *= 2) {
  console.log(start);
}

Output:

1
2
4
8
16

Explanation

The loop starts with start = 1.
Each time, start is multiplied by 2 (start *= 2).
The loop stops when start is greater than 20.

Conclusion

The for loop is a versatile looping structure in JavaScript. It is particularly useful when you know how many times you need to iterate or when working with arrays and objects.

Key Points to Remember

The for loop contains an initialization, a condition, and a final expression.
Use break to exit a loop early and continue to skip to the next iteration.
Nested for loops are great for multi-dimensional tasks.
Use for…in for iterating over object properties.
Use for…of for iterating over iterable items like arrays and strings.

With this tutorial, you should have a solid understanding of the for loop and its many use cases in JavaScript. Happy coding!

0 comment
0 FacebookTwitterPinterestEmail
Control Flow

JavaScript do while Loop: A Complete Tutorial with Examples

written by utmoker71

The do…while loop in JavaScript is similar to the while loop, with one key difference: a do…while loop will execute the code block at least once, even if the condition is false.

This is because the condition is evaluated after the code block is executed.

Syntax of the do…while Loop

do {
  // Code to execute
} while (condition);

Explanation

do: This block of code will run first before the condition is checked.
while (condition): The loop will continue to run as long as this condition is true.

1. Basic do…while Loop Example

Let's start with a simple example that prints numbers from 1 to 5.

let number = 1;

do {
  console.log(number);
  number++;
} while (number <= 5);

Output:

1
2
3
4
5

Explanation

The code inside the do block is executed first, so 1 is printed.
After the code block runs, the while condition (number <= 5) is checked.
If the condition is true, the loop runs again; otherwise, it stops.

2. Executing the Loop at Least Once

One of the main benefits of using a do…while loop is that the code block will always execute at least once, even if the condition is false to begin with.

let count = 10;

do {
  console.log(count);
  count++;
} while (count < 5);

Output:

10

Explanation

The loop executes the do block first, printing 10.
Then it checks the condition (count < 5), which is false.
Since the condition is false, the loop stops after the first execution.

3. do…while Loop for Input Validation

The do…while loop is handy for validating user input. Here's an example where the loop prompts the user for a number greater than 10:

let userInput;

do {
  userInput = parseInt(prompt('Enter a number greater than 10:'));
} while (userInput <= 10 || isNaN(userInput));

console.log(`You entered: ${userInput}`);

Explanation

The do block executes first, prompting the user to input a number.
The while condition checks if the input is less than or equal to 10 or is NaN.
The loop repeats until the user enters a valid number greater than 10.

Note: This example uses prompt() for input, which works in a browser environment.

4. Using break to Exit a do…while Loop

You can use the break statement inside a do…while loop to exit it prematurely based on a specific condition.

let i = 1;

do {
  console.log(i);
  if (i === 3) {
    break; // Exit the loop when i is 3
  }
  i++;
} while (i <= 5);

Output:

1
2
3

Explanation

The loop starts with i = 1 and prints numbers.
When i equals 3, the break statement exits the loop.
The loop stops even though the while condition is still true.

5. Using continue to Skip an Iteration

The continue statement can be used in a do…while loop to skip the current iteration and move to the next one.

let num = 0;

do {
  num++;
  if (num % 2 === 0) {
    continue; // Skip even numbers
  }
  console.log(num);
} while (num < 10);

Output:

1
3
5
7
9

Explanation

The loop increments num before checking the if condition.
If num is even (num % 2 === 0), the continue statement skips the rest of the loop's code and moves to the next iteration.
Only odd numbers are printed.

6. Nested do…while Loops

You can nest do…while loops to handle more complex scenarios, like printing a simple multiplication table.

let i = 1;

do {
  let j = 1;
  
  do {
    console.log(`${i} * ${j} = ${i * j}`);
    j++;
  } while (j <= 5);
  
  i++;
} while (i <= 5);

Output:

1 * 1 = 1
1 * 2 = 2
...
5 * 4 = 20
5 * 5 = 25

Explanation

The outer do…while loop iterates over i from 1 to 5.
For each iteration of i, the inner do…while loop iterates over j from 1 to 5.
This prints the multiplication table for numbers 1 through 5.

7. do…while Loop with Arrays

The do…while loop can be used to iterate through an array, especially if you need to process at least one element regardless of conditions.

let fruits = ['apple', 'banana', 'cherry'];
let index = 0;

do {
  console.log(fruits[index]);
  index++;
} while (index < fruits.length);

Output:

apple
banana
cherry

Explanation

The loop starts with index = 0.
It prints each element in the fruits array.
The loop continues until index is equal to the length of the array.

Conclusion

The do…while loop in JavaScript is useful when you need to guarantee that a block of code runs at least once, regardless of whether the condition is initially true or not.

Here are some key takeaways:

The code inside the do block executes before the condition is checked.
Always remember to modify the loop variable within the loop to avoid infinite loops.
Use break to exit the loop and continue to skip the current iteration when necessary.

By understanding how to use the do…while loop, you can handle situations where you need to ensure at least one iteration of code execution before checking a condition. Happy coding!

0 comment
0 FacebookTwitterPinterestEmail
Control Flow

JavaScript while Loop: A Complete Tutorial with Examples

written by utmoker71

The while loop in JavaScript repeatedly executes a block of code as long as a specified condition evaluates to true.

It is useful when you don't know beforehand how many times you need to repeat a code block.

Syntax of the while Loop

while (condition) {
  // Code to be executed
}

condition: The loop continues as long as this expression evaluates to true.
The loop's body is enclosed in curly braces {} and will execute each time the condition is true.

Example 1: Basic while Loop

Let's start with a simple example that prints numbers from 1 to 5 using a while loop.

let number = 1;

while (number <= 5) {
  console.log(number);
  number++; // Increment the number
}

Output:

1
2
3
4
5

Explanation

The loop starts with number set to 1.
It checks if number is less than or equal to 5. If true, it executes the code inside the loop.
console.log(number) prints the current value of number.
number++ increments number by 1.
The loop repeats until number is greater than 5.

Example 2: Using the while Loop for Input Validation

The while loop is often used to validate user input. Here's an example where the loop prompts the user until a valid number is entered.

let userInput = prompt('Enter a number greater than 10:');

while (userInput <= 10) {
  userInput = prompt('Invalid input. Please enter a number greater than 10:');
}

console.log(`You entered: ${userInput}`);

Explanation

The loop continues prompting the user until a number greater than 10 is provided.
prompt() returns the user input as a string, so it’s implicitly converted to a number when compared (<=).
Once a valid number is entered, the loop exits, and the valid input is logged to the console.

Note: This code snippet uses prompt() for input, which is a common way to get input in the browser.

Example 3: Infinite while Loop

An infinite while loop continues forever because the condition always remains true. Here’s an example of an infinite loop (though it's generally a situation to avoid):

while (true) {
  console.log('This will run forever unless manually stopped.');
}

Explanation

The condition true is always true, so the loop will never end on its own.
Important: Infinite loops can crash your program or browser, so they should be used with care and a clear plan to exit.

Example 4: while Loop with break

To exit a while loop prematurely, you can use the break statement.

let count = 1;

while (true) {
  console.log(count);
  count++;
  
  if (count > 5) {
    break; // Exit the loop when count is greater than 5
  }
}

Output:

1
2
3
4
5

Explanation

This is an infinite loop (while (true)), but it contains a break statement.
The loop stops when count exceeds 5.

Example 5: Skipping an Iteration with continue

The continue statement skips the current iteration of the loop and moves to the next one.

let num = 0;

while (num < 10) {
  num++;
  
  if (num % 2 === 0) {
    continue; // Skip the rest of the code inside the loop if num is even
  }
  
  console.log(num); // This will print only odd numbers
}

Output:

1
3
5
7
9

Explanation

The continue statement is used to skip printing the even numbers.
When num % 2 === 0 (i.e., num is even), continue skips the rest of the loop's code and goes to the next iteration.

Example 6: Nested while Loops

You can use nested while loops for more complex scenarios, such as printing a simple multiplication table.

let i = 1;

while (i <= 5) {
  let j = 1;
  
  while (j <= 5) {
    console.log(`${i} * ${j} = ${i * j}`);
    j++;
  }
  
  i++;
}

Output:

1 * 1 = 1
1 * 2 = 2
...
5 * 4 = 20
5 * 5 = 25

Explanation

The outer while loop iterates over i from 1 to 5.
The inner while loop iterates over j from 1 to 5 for each i.
It prints the product of i and j in a multiplication table format.

Example 7: Using while Loop with Arrays

The while loop can be used to iterate over an array.

let fruits = ['apple', 'banana', 'cherry'];
let index = 0;

while (index < fruits.length) {
  console.log(fruits[index]);
  index++;
}

Output:

apple
banana
cherry

Explanation

The loop continues as long as index is less than the length of the fruits array.
It accesses each element in the array and prints it to the console.

Conclusion

The while loop is a powerful tool in JavaScript for running a block of code as long as a specified condition remains true. It is particularly useful when you don't know beforehand how many times you need to repeat the loop.

Here are some key points to remember:

Ensure that the condition eventually becomes false to avoid infinite loops.
Use break to exit a loop prematurely when necessary.
Use continue to skip the current iteration and move to the next one.

With this tutorial, you now have a solid understanding of the while loop and its various use cases in JavaScript. Happy coding!

0 comment
0 FacebookTwitterPinterestEmail
Control Flow

JavaScript switch Statement: A Complete Tutorial with Examples

written by utmoker71

The switch statement in JavaScript is a control structure used to execute different code blocks based on the value of an expression.

It is a more readable alternative to multiple if…else statements when dealing with multiple conditions.

Syntax of switch Statement

switch(expression) {
  case value1:
    // Code to execute if expression === value1
    break;
  case value2:
    // Code to execute if expression === value2
    break;
  ...
  default:
    // Code to execute if none of the cases match
}

Explanation

switch(expression): The expression whose value is compared against the cases.
case value: Each case compares its value with the expression.
break: Exits the switch block. If omitted, the next case will be executed regardless of the match.
default: Optional. Executes if none of the case values match the expression.

1. Basic switch Statement Example

Here’s a simple example using the switch statement to match a variable against different fruit names:

let fruit = 'apple';

switch(fruit) {
  case 'apple':
    console.log('Apples are $1 per pound.');
    break;
  case 'banana':
    console.log('Bananas are $0.50 per pound.');
    break;
  case 'cherry':
    console.log('Cherries are $3 per pound.');
    break;
  default:
    console.log('Sorry, we are out of that fruit.');
}

Output: Apples are $1 per pound.

Explanation

The switch statement checks the value of fruit.
When fruit is ‘apple', it matches case ‘apple', executes its code, and exits the switch block due to the break.

2. Using default in a switch Statement

The default case executes if none of the specified cases match the expression. This is similar to the else statement in an if…else block.

let color = 'purple';

switch(color) {
  case 'red':
    console.log('You chose red.');
    break;
  case 'green':
    console.log('You chose green.');
    break;
  case 'blue':
    console.log('You chose blue.');
    break;
  default:
    console.log('Color not recognized.');
}

Output: Color not recognized.

Explanation

Since color is ‘purple' and none of the cases match, the default case executes.

3. Multiple Cases with the Same Code

You can group multiple case labels together to execute the same code block:

let day = 'Saturday';

switch(day) {
  case 'Monday':
  case 'Tuesday':
  case 'Wednesday':
  case 'Thursday':
  case 'Friday':
    console.log('It\'s a weekday.');
    break;
  case 'Saturday':
  case 'Sunday':
    console.log('It\'s the weekend!');
    break;
  default:
    console.log('Not a valid day.');
}

Output: It's the weekend!

Explanation

If day is ‘Saturday' or ‘Sunday', the same code block runs because they are grouped together.

4. Omitting break for Fall-Through

If the break statement is omitted, JavaScript will continue executing the next case statements (known as fall-through). While this is generally not recommended, it can be used in specific scenarios.

let score = 'B';

switch(score) {
  case 'A':
    console.log('Excellent!');
    break;
  case 'B':
  case 'C':
    console.log('Well done!');
    break;
  case 'D':
    console.log('You passed.');
    break;
  case 'F':
    console.log('Try again.');
    break;
  default:
    console.log('Invalid grade.');
}

Output: Well done!

Explanation

When score is ‘B', it falls through to the next line (case ‘C') since they share the same console.log().

5. Using Expressions in switch Statements

The switch statement can also handle complex expressions:

let number = 10;

switch(true) {
  case (number < 0): console.log('Number is negative.'); break; case (number === 0): console.log('Number is zero.'); break; case (number > 0):
    console.log('Number is positive.');
    break;
  default:
    console.log('Not a valid number.');
}

Output: Number is positive.

Explanation

The switch expression here uses true to allow the use of conditions within the case statements.

6. Nesting switch Statements

You can nest switch statements within each other, but this should be done with caution to avoid overly complex code.

let animalType = 'mammal';
let animalName = 'dog';

switch(animalType) {
  case 'mammal':
    switch(animalName) {
      case 'dog':
        console.log('It\'s a dog, a friendly mammal.');
        break;
      case 'cat':
        console.log('It\'s a cat, an independent mammal.');
        break;
      default:
        console.log('Unknown mammal.');
    }
    break;
  case 'bird':
    console.log('It\'s a bird.');
    break;
  default:
    console.log('Unknown animal type.');
}

Output: It's a dog, a friendly mammal.

Explanation

The outer switch checks the type of animal (animalType).
If it's a ‘mammal', it enters an inner switch to check the specific animal name (animalName).

Conclusion

The switch statement is a powerful tool in JavaScript for handling multiple conditions. It is particularly useful when you have a variable that can take on a discrete set of values.

The use of case, break, and default statements allows for flexible and readable code.

Key Points to Remember
Use break to prevent fall-through.
Group multiple case statements to run the same code.
The default case is optional but useful as a fallback.
switch statements can handle complex conditions when used with expressions.

Now that you have a thorough understanding of switch statements, you can apply them to various scenarios in your JavaScript programming!

0 comment
0 FacebookTwitterPinterestEmail