What is Control Flow?
Control Flow is essentially just that, you control the flow of your code. Control Flow is very important when you want your code to function efficiently. For example, you could use a loop to manage your control flow. You could use conditional statements for checking conditions. A conditional statement is a feature that performs different actions depending on whether a programmer-specified Boolean condition evaluates to true or false
For example
if (condition is true){
do an action
}
Loops
- The job of a loop is to loop through a portion of code over and over again
For Loops
- To create a for loop type
for(){
}
- This is basically the template for the for loops
- Now lets go ahead and put in some code
for(let i = 0; i < 5; i++){
}
Now, you're probably wonder what the heck did you just type. Well, let me explain. The let i = 0; is an initialization variable it means that the variable i is set to equal to 0. This variable keeps track of how many times the loop is activated. Then the second thing is a condition. The i < 5 states that if the condition is true. You are going to execute the code that is in between the { } and vice versa. The final thing is a final expression. The i++ will show every time at the end of the code block it will also add to the number every time
Now, how does this code function as a whole?
Funny you should mention it. We stated that the variable I is equal to 0. Then is will pass through the second line of code. The second part will see if the statement i < 5 is true. Then the third will add 1. Then this code will repeat until i is equal to five and then the loop will no longer function
What will you put in between the brackets?
In the brackets you put what you want to loop
For example,
for(let i = 0; i < 5; i++){
console.log('in loop:', i);
}
console.log('loop finished');
This will loop it until i is equal to five. Then, once it is equal to 5 it will display loop finished to the console. Lets do some more practice but with an array involved
For example,
const names = ['kevin', 'adrian', 'gaby'];
for(let i = 0; i < names.length; i++){
console.log(i);
}
This is just like the previous example but this time instead of checking weather i < 5 we are checking if i < the number of names. Then if i is less than the number of names then it follows the code in between the { } then it adds one. However, until i is not less than the number of names it will run the code until it is equal to the number of names. Now lets say you want to log the names in the names variable in order
Simple,
const names = ['kevin', 'adrian', 'gaby'];
for(let i = 0; i < names.length; i++){
console.log(names[i]);
}
When you run this code i is equal to 0. Therefore, it will return kevin. Then when it loops again i is 1 because we added one from the i++ code which will return adrian and so on and so forth.
While Loops
A while loop is the same thing as the for loop. However, there is a difference between these two loops. The difference is the syntax
- Syntax - the arrangement of words and phrases to create well-formed sentences (in this case instead of sentences we will create efficient code) What is the template for the while loop?
- This is the template for the while loop
while(condition){
}
Like I said before, the while and for loops are very similar. By now you have already spotted the differences. The difference is that the while loop begins with the key word while and in the () you type a condition and nothing else
For instance
while(i < 5){
console.log('in loop: ', i);
}
This code basically states that while i is less than 5 execute the following code. However, we did not state what i represents or is equal to. In the for loop we stated that between the (). In order to use the while loop you must have already stated what the variable represents before you state the loop.
For example,
let i = 0;
while(i < 5){
console.log('in loop: ', i);
}
Don't run this yet. This code will result in a problem
What problem?
Well, we stated that i is equal to 0. Then we said while i is equal to 0 execute the code below. It will always execute this loop because i will always be less than 5 because it is equal to 0. To avoid this issue we have to add 1 to i every time the loop is activated to the point where i is = to 5 then the code will stop.
How do you do that?
Well, good question. It super easy. Just add while i++; at the very end of the code block
Like so
let i = 0;
while(i < 5){
console.log('in loop: ', i);
i++;
}
Now lets go back to the arrays from before. Lets log the names in order like the for loop but instead of using the for loop lets use the while loop. Lets get started
const names = ['kevin', 'adrian', 'gaby'];
let i = 0;
while(i < names.length){
console.log(names[1]);
}
Now, my code is flawed. Can you try to find out what is wrong with my code? For those of you who don't know how my code is flawed. Let me show you. We wanted to state the names in the array in order correct. Well we did that but there is 1 problem i will always be equal to 0 because we did not include i++. Therefore the name kevin will always be logged into the console. This is the correct way to do it
const names = ['kevin', 'adrian', 'gaby'];
let i = 0;
while(i < names.length){
console.log(names[1]);
i++;
}
Do While Loops
The do while loop is essentially just an extension of the while loop. For example, lets say you have a while loop.
let i = 5;
while(i < 5){
console.log('in loop: ', i);
i++;
}
There is a problem here. We stated that i is equal to 5. In order to run the while loop i needs to be less than 5. Therefore, the while loop will not run. However, lets say that you want to run the code at least once. Simple, type the do key word. Then type { }. Like so
let i = 5;
do{
console.log('in loop: ', i);
i++;
}
while(i < 5)
This code is saying run the code that is in between the do block once. Regard less of what I is set to. That is what the do while loop is.
If Statements
The If Statement is also known as a conditional statement. What the if statement does is state that if a certain condition is true then run this code.
For example,
const age = 22
if (age > 20){
console.log('Your more than 20 years of age.');
}
This will run in the console if your age is more than 20 years then display Your more than 20 years of age in the console. That is basically the if statement.
Else & Else If
Else
Now lets take the code from the previous section and change the value of age to equal 19. Now you may want to say that if your 19 years of age then you want to display You are less than 20 years of age. This is where the else comes into play.
To use the else key word you need to place it behind the if statement block. For example,
const age = 19
if (age > 20){
console.log('Your more than 20 years of age.');
} else {
}
Now we stated above that we wanted to display something when age is less than 20. Simple,
const age = 19
if (age > 20){
console.log('Your more than 20 years of age.');
} else {
console.log('Your less than 20 years of age.');
}
This is what this code block will do. It will check if age > 20. In this case this is false. Therefore it will display Your less than 20 years of age.
Else if
The else if statement is the same thing as the else statement. You can put as many else if statements as you want. It just check if weather a condition is true run the code if it is false don't run this code. For example,
const age = 20
if (age > 20){
console.log('Your more than 20 years of age.');
} else if(age == 20){
console.log('Your 20 years of age.');
} else {
console.log('Your less than 20 years of age.');
}
Since age is equal to 20, this will display in the console Your 20 years of age. This is because we used the else if keyword. Which states that if age is equal to 20 then display Your 20 years of age.
Operators
Logical Operators
There are 2 logical operators. They are && or the ||. The && operator with run 2 conditional statements at the same time. To use the && operator just type it between the 2 conditions. For example,
let name = 'nathan';
if(name.length == 6 && name.includes ('t')){
console.log("That's a wonderful name");
}
This checks if the name nathan has 6 characters and if it includes the letter t at the same time. Then it will display what is in the code block. However if the name does not equal 6 characters and does not have the letter t then it will not run the block code. The conditional statements both need to be true in order for it to run the block code.
Now the || says that if either this statment is true or this stament is true then run this code. For example,
let name = 'nathan';
if(name.length == 6 || name.includes ('z')){
console.log("That's a wonderful name");
}
This will run the block code because even though the name nathan does not have the letter z it has 6 characters and it will run the block code.
Logical Not
Now lets say you want to run an if statement when the variable is false or not true. This is where the logical not comes into play. The logical not is an exclamation mark. What the ! mark does is essential make what it is equal to the opposite of it. For example,
console.log(!true);
console.log(!false);
If you run this code it will show flase then true because the ! turns the true to the opposite of true which is false. This goes the same for false.
Break & Continue
Break
The break statement is used to stop in the of a statement. For example, if we have an array and we state that when a value is equal to a certain number. STOP! then run this code. For example, Lets say we are coding a game. In order to beat that game you need to achieve a the high score of 100. Then once that player achives the socre of 100 then you want to show Congratulations, New High Score. Simple
const score = [ 2, 10, 3, 9, 50, 60, 100, 20, 1];
for(let i = 0; 1 < score.length; i++){
console.log('Your score is', scores[i]);
if(scores[i] === 100){
console.log('Congratulations, New High Score!');
break;
}
}
What this will do is when we get to the value of 100 in the array, it will display Congratulations, New High Score! This is because we said that when the score is 100, log into the console Congratulations, New High Score!. Then with the break keyword we basically said stop counting.
Continue
What the continue key word will do is ignore all of the code on the bottom of the keyword. For example, lets take the previous example. This time we want to say that if your score is 0 then you can continue. Simple,
const scores = [ 2, 10, 3, 9, 50, 60, 100, 20, 1];
for(let i = 0; 1 < scores.length; i++){
if(scores[i] === 3){
continue;
}
console.log('Your score is', scores[i]);
if(scores[i] === 100){
console.log('Congratulations, New High Score!');
break;
}
}
What this will show in the console will be the number 2, 10, 9, and so on. The reason why it skipped the number 3 in the array is because of the continue keyword.
Switch Statements
Lets say you want to state a variable and find out what that variable will input into the console. This is what the switch key word does.
const number = 3;
switch(number){
case 1:
console.log('You got number 1.');
break;
case 2:
console.log('You got number 2.');
break;
case 3:
console.log('You got number 3.');
break;
case 4:
console.log('You got number 4.');
break;
}
Since we assigned the number variable equal to 3. The switch key word is basically checking if there is a number in any of the cases. If there is a number 3 then run this code. A different alternative to this is that you could also use the else if key word. The only difference is that the switch key word looks neater and clean versus the else if.
Variables & Block Scope
- Block scope - is the area within if, switch conditions or for and while loops.
The curly brackets
{}is a block. Lets say you set a variable equal to something. Then in a block you state the variable equal to something else. Then if the variable is called again, it will display the newer version of what the variable is equal to. For example,
let number = 1
if(true){
number = 50
console.log('Hello number', number);
}
console.log('Hello number', number);
At the begging we stated that the variable number is equal to 1. Then in the if statement block we gave that variable a new value of 50. Since 50 was the last value of that variable, whenever the variable is called, it will be replaced with 50.
Top comments (0)