1. Arrays and Loops

2. Learning Objectives By the end of this lecture, you should be able to: – Understand what a loop is – Appreciate the need for loops and the power of loops when working with arrays – Know how to use a 'for' loop to iterate through an array

3. Arrays Consider this array of 10 students: var students = [82, 97.3, 64.8, 91, 88, 72, 64, 99, 57, 95.2]; Now imagine if we wanted to calculate the average of the 10 students. We would need to do something like the following: var average = (students[0] +students[1] + students[2] + students[3] + students[4] + students[5] + students[6] + students[7] + students[8] + students[9]) / 10.0; This is tedious and potentially error prone, but it would work. Now…. Imagine if instead of 10 students, there were 872 students! Or 8720…. Clearly the above code sample would not be an ideal way of dong things. Enter the LOOP….

4. Loops Every programming language has some technique for repeating a series of commands over and over again. This technique is called a 'loop'. There are various ways of looping in programming. One of the most popular looping techniques, is the ' for ' loop. The for loop is available in nearly every major language in use these days. Here is a loop that will output the numbers 1 through 10 into a ' log ' section of a web page. for (var counter = 0; counter<10; counter=counter+1) { $('#log').append( counter + " "); } The first thing that we need to do when creating a for loop is to declare a local variable: var counter; We must then initialize the variable to some starting number. We can choose any number we like. Since in programming we frequently start with 0, that is what we will do here: var counter = 0; We then need to have a point at which we stop looping. That is the second item (after the semicolon): counter < 10; Finally, we must have an "update" action. This update will execute every time we complete a loop. counter = counter+1; //Adds 1 to the variable counter

5. Loops: Order of operations for (var counter = 0; counter<10; counter=counter+1) { //body of the loop //goes here } Question: At what point do we declare the variable (i.e. the first term)? Answer: We declare the variable and give it its initial value the first (and only the first) time through the loop. Question: At what point to we evaluate the conditional (i.e. the the second term)? Answer: We evaluate the conditional every time we wish to execute the body of the loop. If the conditional evaluates to true, then we execute the body of the loop. If it evaluates to false, then we are done with the loop. Question: At what point to we execute the body of the loop (i.e. the code inside the braces)? Answer: We execute the body immediately after evaluating the conditional expression (the second of the 3 terms). Note that we do NOT execute the third term (the update action) until AFTER we execute the body of loop. Question: At what point do we do the 'update action' (i.e. the third term)? Answer: We do the update action after executing the body of the loop. We do it every time we complete the loop. NOTE: Every time we execute the update action, we RE-EVALUATE the conditional. See: first_loop.htm

6. Loops and Arrays Here is the typical syntax of a loop usage when iterating through an array: Note that this technique can vary based on circumstances, but the code shown here will usually do the trick. Now let's apply it to our students array: var students = [82, 97, 64, 91, 88, 72, 64, 99, 57, 95]; for (var counter=0; counter < students.length; counter=counter+1) { $('#log').append( students[counter] + " "); } The first time through the loop, when the value of counter is 0, we will execute the statement: $('#log').append( students[0] + " "); The second time through the loop, when the value of counter is 1, we will execute the statement: $('#log').append( students[1] + " "); The final time through the loop, will be when counter has a value of 9. The reason is that when counter has a value of 10, the conditional expression: counter<students.length will be FALSE. $('#log').append( students[9] + " ");

7. Loops and Arrays Let's now return to our array of students – and let's add a bunch of additional values: var students = [82.3, 97.4, 64.0, 91.0, 88, 72, 64, 99, 57, 95, 73, 54, 100, 89, 86, 70, 60, 78, 59, 98, 87, 80.9, 94, 100, 42.3, 72.2]; Now suppose we wanted to calculate the average. I hope you can see that trying to do it using: var average = (students[0] +students[1] + students[2] + students[3] + students[4] + students[5] + students[6] + students[7] + students[8] + students[9] ETC ETC ETC...; would most certainly not be an ideal way of doing things. (If you don't believe me, imagine if you had 50000 values inside that array – could happen!) var sumOfScores = 0; for (var counter=0; counter< students.length; counter=counter+1) { sumOfScores = sumOfScores + students[counter]; } By the end of this loop, we will have the sum of all values in the 'students ' array stored inside the variable 'sumOfScores '. We can now calculate the average by writing: average = sumOfScores / students.length;

8. Example Continuing with our theme of learning by examining code that may contain both familiar and unfamiliar elements, study the example: arrays_global_variable.htm In addition to providing an example of code involving arrays and the for-loop, this example also introduces the concept of a 'global variable'.