Javascript Guide - Control Structures
You can now also navigate the guide through the table of contents.
Up to now, all we did was to learn the basics of the language (like variables and operators), and it's time we learn how to control our program's behavior.
Conditional Statements
If - Else
Every program is made out of conditions. The most basic ones are If-Else. They are quite usfull to use - we give the statement a boolean condition. If it passes, whatever is in that if block will be executed:
var a = 1;
if (a>0){
a++;
}
console.log(a);
Simple enough. This starts out simple, but you can see they are quite powerful, and they are in fact one of the most basic foundation of every program. But there is more - we might want to know if a statement failed - and for that we have the else statement:
var a = 2;
if (a===3){
console.log('a');
} else {
console.log('b');
}
// will log b
And to make it even more powerful-
var a = 2;
if (a===3){
console.log('a');
}else if (a===1){
console.log('b');
}else {
console.log('c')
}
There are a few other types of conditional statements out there, but they are essentially specific versions of the above, and so we will not address them on this post.
Loops
Loops are another very important part of our programs. A loop receives a block of code, and runs it over and over again, until a stop condition occurs, or the loop is broken manually.
There are 2 main types of loops in JS - the While and for.
While Loops
The while loop looks much like the if statement - it receives an argument, and as long as it is true it will continue running. It is very important to make sure that we use a variable for our loop condition, so that we will be able to manipulate it, controlling when the loop stops.
An example is due:
var a =0;
while (a<3){
console.log(a++);
}
And another - more complex one:
var a =1, b=true;
while (b){
console.log(a);
if (++a == 3) b=false;
// when b is set to false, the condition will fail before the next iteration, stopping it.
}
For Loops
The for loop is quite more complex. The for loop receives 3 parts, separated with semi-colons:
- Variable assignment, separated by commas. This will run before the first iteration of the loop.
- Stop Condition
- Action to perform after each iteration
Confused? This is how it looks: for (var i=0; i<3;i++){}.
- Variable assignment The first part - variable assignment - we assign
ithe value of 0. - Stop Condition We tell the script to run as long as
iis smaller than 3. - Action to perform after each iteration increase i by one.
With this in mind, we get the same behavior as the first while loop - i will get incremented, and when it reaches the value of 2, the loop will iterate no more.
for (var i=0;i<3;i++){
console.log(i);
}
Break and Continue
When talking about loops, we should also be familiar with 2 JS keywords - break and continue:
break-
breaks current loop. When used within a loop, it will stop it and move on with the script:
var a = 0; while (a++<100){ console.log(a); if (a===5) break; }run code - continue
-
When used, will skip the current iteration.
for (var i=0;i<5;i++){ if (i===3) continue; console.log(i); }run code
Next Post - Functions.