DEV Community

Achilonu Chinwendu Faustina
Achilonu Chinwendu Faustina

Posted on

Mastering Conditional Statements, Loops, and FizzBuzz in JavaScript

Table of Contents

  1. Introduction 2.0 Understanding Conditional Statements
  • 2.1. Basic Conditional Statement

  • 2.2. Nested Conditional Statements

3.0 FizzBuzz: A Fun Programming Exercise

  • 3.1. The FizzBuzz Function

  • 3.2. Using For Loop for FizzBuzz

  • 3.3. Leveraging While Loop for FizzBuzz

4.0 Exploring For Loops

  • 4.1. Basic For Loop Example

  • 4.2. Applying For Loop to FizzBuzz

5.0 Unraveling While Loops

  • 5.1. Basic While Loop Example

  • 5.2. Adapting While Loop for FizzBuzz
    6.0 Conclusion

1. Introduction

JavaScript is a versatile programming language with powerful features, and understanding conditional statements and loops is essential for effective programming. In this article, we'll dive into the basics of conditional statements and explore how to use them in practical examples. Additionally, we'll unravel the popular FizzBuzz problem using different loop structures.

2. Understanding Conditional Statements

Conditional statements are crucial for decision-making in programming. The else-if statement allows you to chain multiple conditions, providing alternative code blocks to execute based on different scenarios. Let's break down the provided code example that evaluates your last score and provides feedback on your performance for a better understanding.

2.1 Basic Conditional Statement

var score = prompt("enter your last score");

if (score > 50 && score <= 80) {
    alert("well above average");
} else if (score > 80 && score <= 90) {
    alert("Excellent performance");
} else if (score > 100) {
    alert("You are a genius");
} else {
    alert("You need to work harder");
}

Enter fullscreen mode Exit fullscreen mode

Interpretation

  • If the score is between 50 and 80, the alert will display "Well above average."

  • If the score is between 80 and 90, the alert will display "Excellent performance."

  • If the score is above 100, the alert will praise with "You are a genius."

  • If none of the above conditions are met, the default is "You need to work harder."

2.2 Nested Conditional Statements

Nested conditional statements allow for more complex decision-making. In the FizzBuzz examples, you'll see nested conditions based on divisibility.

3 FizzBuzz: A Fun Programming Exercise

FizzBuzz is a classic programming problem that involves printing numbers from 1 to 100. For multiples of 3, print "Fizz"; for multiples of 5, print "Buzz"; and for numbers divisible by both 3 and 5, print "FizzBuzz."

3.1 The FizzBuzz Function

var output = []
var count = 1;

function fizzbuzz(){
    if(count % 3 ===0 && count % 5 === 0){
        output.push("fizzbuzz")
    }
    else if(count % 5 === 0){
        output.push("buzz")
    }
    else if(count % 3 === 0){
        output.push("fizz")
    }

    else{
        output.push(count);
    }
        count++
        console.log(output)


}
fizzbuzz()
Enter fullscreen mode Exit fullscreen mode

In this code, the fizzbuzz function generates an output array based on the FizzBuzz logic. Numbers are pushed into the array unless they are divisible by 3, 5, or both, in which case "Fizz," "Buzz," or "FizzBuzz" is pushed, respectively.

3.2 Using For Loop for FizzBuzz

function fizzBuzz(){
    for(count =1; count<=100; count++){
        if(count % 3 ===0 && count % 5 === 0){
            output.push("fizzbuzz")
        }
        else if(count % 5 === 0){
            output.push("buzz")
        }
        else if(count % 3 === 0){
            output.push("fizz")
        }

        else{
            output.push(count);
        }

    }

        console.log(output)
}
fizzBuzz()
Enter fullscreen mode Exit fullscreen mode

Utilizing a for loop, this code efficiently generates the FizzBuzz sequence and logs the result.

3.3 Leveraging While Loop for FizzBuzz

var output = []
function fizzBuzz(){
    while(count <= 100){
        if(count % 3 ===0 && count % 5 === 0){
            output.push("fizzbuzz")
        }
        else if(count % 5 === 0){
            output.push("buzz")
        }
        else if(count % 3 === 0){
            output.push("fizz")
        }

        else{
            output.push(count);
        }
            count++
    }

        console.log(output)
}
fizzBuzz()
Enter fullscreen mode Exit fullscreen mode

Here, a while loop achieves the same FizzBuzz result through a different iteration approach.

4. Exploring For Loops

For loops are excellent for iterating over a sequence of numbers or elements. Let's explore a basic example and apply it to the FizzBuzz problem.

4.1 Basic For Loop Example

for (y = 0; y < 5; y++) {
    console.log(y);
}

Enter fullscreen mode Exit fullscreen mode

This simple for loop prints numbers from 0 to 4.

4.2 Applying For Loop to FizzBuzz

By integrating a for loop into FizzBuzz, we efficiently generate the sequence without explicitly incrementing the counter.

5. Unraveling While Loops

While loops continue iterating until a specified condition is false. Let's examine a basic while loop and adapt it for FizzBuzz.

5.1 Basic While Loop Example

var x = 1;
while (x < 5) {
    console.log(x);
    x++;
}

Enter fullscreen mode Exit fullscreen mode

This while loop prints numbers from 1 to 4.

5.2 Adapting While Loop for FizzBuzz

The while loop seamlessly accommodates the FizzBuzz logic, providing an alternative approach to the problem as shown in 3.3.

6 Conclusion

Mastering conditional statements and loops is fundamental to becoming proficient in JavaScript programming. Through practical examples like the FizzBuzz problem, you've gained insights into applying these concepts in real-world scenarios. Continue experimenting and honing your skills to become a more adept JavaScript developer. Happy Christmas!

Top comments (0)