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')
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
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:
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.
Top comments (0)