Control Flow in JS
Tags: javascript, webdev, beginners, programming
Published: 2021-11-23 14:44:14

  
I've been researching and trying to teach myself JavaScript and through my countless of hours looking for how to master this amazing language, I've made a list of topics that I think is important for me to tap in to the power of this library and better myself to write code that not only I can understand, but my future peers as well. This will be a series which entails 14 subjects beginner should focus on. 
## (This is from my experience and I'm not saying if you learn this, you will become a master in JavaScript)
Today, we start with:
## Control Flow
 Why is it important? Well, control flow let me dictate how the code should run when certain condition is met. 
<pre>
if(I'm stuck === true){
  take a break;
}else{
 keep going;
}
</pre>

Among many different methods, I found that these three are most commonly use and beginner friendly
 for loops, while loops(do while loop), if/else statements.

## "The main job of a loop is to loop through portion of codes in set number of times."

Let's take a look and some example and different ways of writing each methods:
Let say I want to loop though an array and access data in that array. How would I go about it?
## for loops:
In most cases, I would retrieve data from some data base but I will not do that here. So I will create my own data called tasks.
```javascript
//first let setup constant(we will create some tasks data in this array)
const tasks = ['Walk Dog', 'Wash dishes', 'Take out trash', 'Wash cloths']

for(let i = 0; i < tasks.length; i++){
console.log('Loop through tasks:', tasks[i]
}
console.log('Loop finish')
```
###The code above is doing four things:
1) I write my counter ``let i = 0; ``
2) for i is less than tasks.length, so as long as i is less than the length of tasks value in tasks array (which is four), then it will cycle through each tasks.
3)Finally I add increment ``i++`` which add 1 to every loop(make sure to do this or else your code will be infinite loop).
4) for each cycle I want the name to logout so we console.log()
``` 
//if I only console.log(i) I will get:
0
1
2
//Why zero and not 1? Because programming are zero index, most programming language the first element is always 0
```
``` 
//to get my tasks data I use square bracket notation[] I link the tasks to the code and inside I add i like this:
console.log(tasks[i])

//this will print out each tasks in our array
Loop through tasks: Walk Dog
Loop through tasks: Wash dishes
Loop through tasks: Take out trash
Loop through tasks: Wash cloths
Loop finish
```
## while loops & do while loops
Alternative to for loop but slightly different writing

```javascript
let i = 0;
while(i < tasks.length){
console.log(tasks[i]);
i++;
}
console.log('Loop finish')

let i = 0;
do{
console.log(tasks[i]);
i++;
}while(i < tasks.length);
console.log('Loop finish')

//do while loops let the code block be executed at least once even if the condition is true or false.
```
## If/Else statement (Decision making)
Let you check if the condition is true or false.

Let say if I want to check the password strength of user input and response according to the condition.

Example:
```javascript
const password = 'Iampassword'

if(password.length >= 10){
console.log('Very strong')
}else if(password.length >= 7){
console.log('strong')
}else{
console.log('weak')
}
```
Clearly I know what will be the outcome of this code. console will log the password as 'very strong'.

As I can see, these are just three control flow example that I'm using, yes, there's switch statement, function, etc.. but I think as a beginner, if I understand how these three work, I will likely be able to quickly learn and understand other control flow methods and easily implemented into your code.

###Feel free to leave any question or feedback.
#Thanks for reading!!!