ControlFlow

Control Flow

Introduction

A program can be thought of as a recipe.  The program is read by the computer from top to bottom.
Consider this set of expressions:

var num1 = 3;
var num2 = 4;
var num3 = num1 + num2;
alert(num3);

The computer executes each statement above in order, first assigning the numbers to variables and then adding them, assigning the result to a new variable and then outputing it.

var num3 = num1 + num2;
var num1 = 3;
var num2 = 4;
alert(num3);

Notice that the output now is "NaN"? This is because when num1 and num2 are added together and then the result assigned to num3, they hadn't yet been defined.
Order can be important!

In a single expression, parantheses control the flow:

var a = 3;
var b = 4;
var c = Math.sqrt(Math.pow(a,2) + Math.pow(b,2));
alert(c)

In a single expression, parantheses control the flow:

Math.pow(a,2) + Math.pow(b,2)

Since those are in the same set of parantheses, we read left to right.
Then we step out one level of parantheses to perform the square root:

Math.sqrt(<result of adding previous results>)

And then assign that value to c before outputting it.

This is an example of what is known as 'imperative programming', which refers to a type of programming that changes the state with the use of sequential procedures.  There are many other programming paradigms, some of which we will explore in this course.

Looping - For Loops

What if you wanted to keep doing something until a condition was met?

Like this:

for(var a=0;a<3;a++){
    alert('hello');
}

This is called a for loop.  When a loop is encountered, the pieces between the curly braces will be executed in order as long as the condition is met.

In the beginning of the loop, you'll see first a variable declaration, then a condition, then a method of updating the variable.

The computer executes the expressions enclosed in the curly braces in sequence as long as the condition in the middle evaluates to true.  Of critical note is that there is no guarantee that the for loop will execute at all if the condition is initially false.

Conditional Statements

But what if you want to execute something only if a condition is met?
For instance, what if I wanted to follow the wise words of the Safety Dance?
This could look something like this:

var yourFriends = []
var myFriends = []
var people = [{name: 'Suzanne',dances: false},{name: 'Frank',dances: true},{name: 'Ivan',dances: true},{name: 'Hal',dances: false}]

for (var i = 0;i<people.length;i++){
    ea = people[i]
    if(ea.dances == false){
        yourFriends.push(ea)
    } else {
        myFriends.push(ea)
    }
}
var yourStr = 'Your Friends: '
var myStr = 'My Friends: '
yourFriends.forEach(function(ea){
    yourStr += ' ' + ea.name 
});
myFriends.forEach(function(ea){
    myStr += ' ' + ea.name 
});
alert (yourStr + '\n' + myStr)

If you execute these statements, you will find that your friends don't dance and if they don't dance then they're no friends of mine.

As the program steps through the list of people, it evaluates whether or not they dance.  If they don't, it adds them to your list, whereas if they do, it adds them to mine.  Then, at the end, each is added to a string for convenient output and displayed.

Before we get started, a small change has been made.  This time, if you want to evaluate the expressions in a bordered code box, simply hold shift and click on them.  This should save you time and let you focus on the content being introduced.

When you evaluate an if statement, it will only execute the enclosed expressions if the condition is evaluated and meets the condition(s).
An if statement can be followed by an 'else if', 'else' or nothing, where further conditions are checked or a default selected.  An example of this is given in the following section.

Generate Shoppers

Reset Shoppers

Select Aisle

Example

Below, you can see an example of control flow in action.
This example generates 16 shoppers and assigns them to a random shop aisle, up to a maximum of 5 shoppers per aisle.
If you ask for a recommendation for which line to choose, the computer will, starting from the left, find the aisle with the smallest number of shoppers in it.  In the event of a tie, it will recommend the leftmost of the tied aisles.

This example makes use of both conditional statements and loops.  Feel free to look at the code to see what's going on.

/home/lively/LivelyKernel/users/robertkrahn/csc130/tutorials.css

X

–

Menu