Arieh.co.il

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);
    
run code

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
    
run code

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')
    }
    
run code

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++);        
    }
    
run code

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.
     }
    
run code

For Loops

The for loop is quite more complex. The for loop receives 3 parts, separated with semi-colons:

  1. Variable assignment, separated by commas. This will run before the first iteration of the loop.
  2. Stop Condition
  3. Action to perform after each iteration

Confused? This is how it looks: for (var i=0; i<3;i++){}.

  1. Variable assignment The first part - variable assignment - we assign i the value of 0.
  2. Stop Condition We tell the script to run as long as i is smaller than 3.
  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);
    }
    
run code

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.

JavaScript Reference, JavaScript Guide, JavaScript API, JS API, JS Guide, JS Reference, Learn JS, JS Documentation