DEV Community

loading...

Control Flow Basics

coses23298
・6 min read

Control Flow is a way to cycle through and preform code 'for' each part of an array then control flow is the way to do it. It creates conditional statements to help have different variables have different outcomes.

For loops

for(let i = 0; i < 5; i++){
console.log('in loop:', i)
}
Enter fullscreen mode Exit fullscreen mode

This is a simple loop, what loops are supposed to do is go around and around a certain number of times.to make a loop we need the key word 'for' in the beginning then we put parentheses.
The curly braces decide where the block code is 'for' the loop

Inside the parentheses we have 3 different things

We start off with a variable saying that i is going to be equal to 0. this variable keeps track of how many times it's gone through the loop.

Next were asking "is i < 5" if so then it loops again. each time it loops i increases by one value until it is equal to 5.
The i++ is the part of the code that decides it to add one each time, without that it would never add up and the loop wouldn't work.

Lets say you want to know how many things there are in a list. you can create a loop to count each one individually,
so we start off with a constant that has a list

const names = ['Theodore','Henry','Rango'];

for(let i = 0; i < names.length; i++){
console.log(names[i]);
}
Enter fullscreen mode Exit fullscreen mode

this code will tell you the length of the variable names, it will start from the number 0 so it'll go 0, 1, 2. keep in mind of that

While loops

Now we're going over a different kind of loop a while loop. There is no real difference between while and 'for' loops, the only difference is how its written.

let i = 0

while(i < 5){
console.log('in loop:', i);
i++;
}
Enter fullscreen mode Exit fullscreen mode

so instantly you can see that most of the parts of the 'for' loop are moved outside, the variable has been moved to outside of the loop and the addition of i++ is now underneath. this is because in order for a while loop to work the variable you choose must already exist and at the end of the loop it will make sure to count that its done it once

Next we can see a while loop where you can see instead of the number of items in a list, the items within the list

const names = ['billy', 'bob', 'joe']
let i = 0

while(i < names.length){
console.log(names [i])
i++;
}
Enter fullscreen mode Exit fullscreen mode

what will come out of this is the names of the people in the list but not the number of people.

Do while loops

Do while loops are a extension of while loops
the do while loop means that if i < 5 is your limit it will instead make it so that i is less than OR equal to 5, so it will run 5 times instead of just 4

let i = 0;

do {
   i;
  i++;
}
while (i < 10); 
Enter fullscreen mode Exit fullscreen mode

what will come out is
0, 1, 2, 3, 4, 5, 6, 7, 8, 9.
Notice it wont show the number 10 but still 10 items come out.

If statements

If statements are conditionals so, If ____ is true then ____, so what will happen is a code block will only activate if the condition is true,
the code does not loop it just happens one time or zero times.
lets make an example

const age = 19

if(age > 20){
console.log('You are over 20 years old')
}

if(age < 20){
console.log('You are under 20 years old')
}
Enter fullscreen mode Exit fullscreen mode

The top code is asking is variable 'age' higher than 20. if age is not higher than 20 then nothing happens
the bottom code asks the opposite
is 'age' less than 20
this is true age = 19, so the code underneath will display. typing this in will only show the code for if they are younger than 20

We can do the same thing for list lengths that we've done before

const colors = ['red', 'orange', 'yellow', 'green'];

if(colors.length > 3){
console.log("Woah that's a lot of colors")
}
Enter fullscreen mode Exit fullscreen mode

so this code is saying:

there are 4 colors
If the number of colors is higher than 3

then you will say "Woah that's a lot of colors"

so as you can see if/then statements are not that difficult

Else & else if

lets say you want your code to say something if the condition is false or doesn't meet up to its rule. to do this we use an else statement
so lets make a simple password check and put in a password that's too short

const pass = 123;

if(pass.length >= 8){
console.log("password is good");
} else{
console.log("password too short")
}

Enter fullscreen mode Exit fullscreen mode

so what's happening here is the first line of the if statements is asking is the passwords greater than or equal to 8. if it is it says "Password is good" if not the else clause fires up and says "Password too short"
The password in this code is set as "123" so it is not long enough

with this code you can change around the limits of the passwords and have different messages show up

Logical operators

logical operators tell you if something is true or false. using math it can tell you if a conclusion is true or false
lets say that x = 6 and y = 3

Operator Description Example
&& and (x < 10 && y > 1) is true
|| or (x == 5 || y == 5) is false
! not !(x == y) is true

Logical NOT

For logical not we execute code if a condition is false

let atk = false
if(!atk){
console.log("Attack missed!!!")
}
Enter fullscreen mode Exit fullscreen mode

so this is saying that atk is false but the conditional is saying if atk is false then say "Attack missed!!!"

Break and continue

for break you put it at the end of your code and it makes the list stop and the loop stops going through

for (int i = 0; i < 10; i++) {
  if (i == 4) {
    break;
  }
  System.out.println(i);
}
Enter fullscreen mode Exit fullscreen mode

a continue makes it so that it will skip 4 and continue going after that

for (int i = 0; i < 10; i++) {
  if (i == 4) {
    continue;
  }
  System.out.println(i);
}
Enter fullscreen mode Exit fullscreen mode

Switch statements

switch statements are made so that you dont have to use the 'else' clause for every single possible option but instead can use the one for it

let grade = 'f'

switch(grade){
case 'a':
console.log("You got a star");
break;
case 'b':
console.log("You got a dwarf star");
break;
case 'c':
console.log("You got a hot ball");
break;
case 'd':
console.log("You got a microwaved rubber ball");
break;
case 'e':
console.log("You got a heated circle");
break;
case 'f':
console.log("You got a :[");
break;
default:
console.log("How did you even do this?")

}
Enter fullscreen mode Exit fullscreen mode

Each case will give a different answer but the main thing is that if you got one of the letter grades you would get a message which is faster than making a bunch of different functions
You might notice the breaks after every case. this makes sure that the code underneath does not run if it has already found its answer

Variables and block slope

everywhere within the {} of a function is the block of the function.
things can go into and out of the block, such as variables values and things like it.
but if outside the block has a definition but inside has a different one. then the block becomes closed off, nothing comes in nothing comes out. and so variables within the block stay in the block

let age = 40
if(true){
let age = 30
console.log(age)
}
console.log(age)
Enter fullscreen mode Exit fullscreen mode

each one of the console.log(age) will have a different answer
during this any variable added to the block will not be affected outside, this even happens if you have multiple variables and some of them are only used inside the block

let age = 40
if(true){
let age = 30
let name = john
console.log(age)
console.log(name)
}
console.log(age)
console.log(name)
Enter fullscreen mode Exit fullscreen mode

Discussion (0)