DEV Community

Tom Yotwongjai
Tom Yotwongjai

Posted on • Updated on

Control Flow in JS

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.

if(I'm stuck === true){
  take a break;
}else{
 keep going;
}

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.

//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')
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
//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
Enter fullscreen mode Exit fullscreen mode

while loops & do while loops

Alternative to for loop but slightly different writing

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.
Enter fullscreen mode Exit fullscreen mode

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:

const password = 'Iampassword'

if(password.length >= 10){
console.log('Very strong')
}else if(password.length >= 7){
console.log('strong')
}else{
console.log('weak')
}
Enter fullscreen mode Exit fullscreen mode

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!!!

Discussion (0)