🚀Javascript Control Flow

🚀Javascript Control Flow

Learning Outcomes:

💫 What is a control flow

💫 Conditional

💫 Switch Statement

💫 Loops

💫 For & While loop


🤔What is meant by 'Control Flow'?

The term control flow refers to the flow of control, i.e. the flow of baking a cake 🍰 , When stacking multiple layers of cake together, each layer represents a control flow. If you do not put the first layer then how will you work on others 😒

stitch

Similarly, this work on program. First, the control is in one part of the code, then moves to another, and so on.

😨Conditional

Calm down😌, conditional statements mean flow of control based on some conditions. The execution of code is based on the given condition.

The most common conditional statements are if and else


The if statement

The if statement executes code if a given condition is true.

SYNTAX
if (expression) statement;

Let's simplify this with an example:

let age = 20;
//focus on if part
if (age >= 18) {
  console.log("You can vote!✅");
} 
else {
  console.log("You can't vote!❌");
}

OUTPUT: You can vote!✅

Here, if your age is 18 or above 18 then you can vote, the value assigned to the variable age is 20, and 20>18. The condition is True


The else statement

The else statement executes code if a given condition is not true or we can say that in if statement if conditions are not satisfied then else is executed.

SYNTAX
if (expression) statement; else statement;

Let's simplify this with an example:

let age = 16;

if (age >= 18) {
  console.log("You can vote!✅");
} 
else {
  console.log("You can't vote!❌");
}

OUTPUT: You can't vote!❌

Here, if your age is 18 or above 18 then you can vote, the value assigned to the variable age is 16, and 16<18. Therefore, else is implemented.


The switch statement

Alright, let's imagine you have a bunch of different colors of toys🧸, and you want to do something specific for each color🩷. A switch statement in JavaScript is like a set of instructions for the computer to figure out what to do based on the color of the toy.

let toyColor = "red";

switch (toyColor) {
  case "red":
    console.log("This is a fire truck toy!");
    break;
  case "blue":
    console.log("This is a police car toy!");
    break;
  case "green":
    console.log("This is a dinosaur toy!");
    break;
  default:
    console.log("I don't know what kind of toy this is.");
}
  • toyColor is like the color of your toy🧸.

  • The switch statement checks the color and then goes to the matching case to see what kind of toy it is.

  • Each case is like a different color of toy, and there's a special message for each one.

  • The default case is like a backup plan. If the color doesn't match any of the specified cases, it says, "I don't know what kind of toy this is."

So, it's like telling the computer, "Hey, if the toy is red 😡, do this; if it's blue🥶, do that; if it's green🤢, do something else. And if it's none of these, just say you don't know what it is.🤨"


➿ Loops

let's imagine you have a bunch of toy🧸 blocks, and you want to do something with each block one by one. A loop in programming is like a set of instructions that helps you repeat a certain action for each block without having to write the same thing over and over.

for loop

Imagine you have a bag of candies🍭, and you want to give one candy🍬 to each friend. A for loop is like a set of instructions to distribute candies to your friends one by one.

for (let friend = 1; friend <= 5; friend++) {
  console.log("Giving a candy to friend " + friend);
}

Here's what's happening in these instructions:

  1. Setting up the game: let friend = 1 is like saying, "Okay, we're starting with the first friend."

  2. Deciding when to stop: friend <= 5 means "Keep giving candies until we've given one to each friend up to the fifth friend."

  3. Doing the action: friend++ means after each time you give a candy, move on to the next friend.

So, it's like telling the computer, "Let's give a candy to the first friend, then the second, then the third, and so on, until we've given a candy to the fifth friend."


while loop

Imagine you have a bag of candies🍭, and you want to keep giving candies to your friends until the bag🎒 is empty. A while loop is like a set of instructions to keep doing something as long as a certain condition is true.

let candiesInBag = 10;

while (candiesInBag > 0) {
  console.log("Giving a candy to a friend!");
  candiesInBag--;
}

Sure, let's talk about the concept of a while loop using a simple analogy that a 10-year-old can understand.

Imagine you have a bag of candies, and you want to keep giving candies to your friends until the bag is empty. A while loop is like a set of instructions to keep doing something as long as a certain condition is true.

javascriptCopy codelet candiesInBag = 10;

while (candiesInBag > 0) {
  console.log("Giving a candy to a friend!");
  candiesInBag--;
}

Here's what's happening in these instructions:

  1. Setting up the game: let candiesInBag = 10 is like saying, "We start with a bag of 10 candies."

  2. Deciding when to stop: candiesInBag > 0 means "Keep giving candies as long as there's at least one candy left in the bag."

  3. Doing the action: candiesInBag-- means that each time you give a candy, reduce the count of candies in the bag by one.

So, it's like telling the computer, "Keep giving candies to friends as long as there's at least one candy in the bag." The computer will follow these instructions, print out a message saying you're giving a candy to a friend, and decrease the count of candies in the bag each time until the bag is empty.


So, you did it, Damm🔥 my genius😏 friend. Your support and enthusiasm keep this me thriving! 🙌 Thank you for being a part of our journey. 🌈✨

Stay tuned for our next adventure! 🚀🔍