Control Flow Basics
Published: 2020-11-21 21:23:16

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
 ```javascript
for(let i = 0; i < 5; i++){
console.log('in loop:', i)
}
```
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 

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

for(let i = 0; i < names.length; i++){
console.log(names[i]);
}
```
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.
```javascript
let i = 0

while(i < 5){
console.log('in loop:', i);
i++;
}
```
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 
```javascript
const names = ['billy', 'bob', 'joe']
let i = 0

while(i < names.length){
console.log(names [i])
i++;
}
```
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

```javascript
let i = 0;

do {
   i;
  i++;
}
while (i < 10); 
```
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
```javascript
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')
}
```
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
```javascript
const colors = ['red', 'orange', 'yellow', 'green'];

if(colors.length > 3){
console.log("Woah that's a lot of colors")
}
```
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
```javascript
const pass = 123;

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

```
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
```javascript
let atk = false
if(!atk){
console.log("Attack missed!!!")
}
```
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
```javascript 
for (int i = 0; i < 10; i++) {
  if (i == 4) {
    break;
  }
  System.out.println(i);
}
```
a continue makes it so that it will skip 4 and continue going after that
```JavaScript
for (int i = 0; i < 10; i++) {
  if (i == 4) {
    continue;
  }
  System.out.println(i);
}
```


#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
```javascript
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?")

}
```
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
```javascript
let age = 40
if(true){
let age = 30
console.log(age)
}
console.log(age)
```
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
```javascript
let age = 40
if(true){
let age = 30
let name = john
console.log(age)
console.log(name)
}
console.log(age)
console.log(name)
```