Student Instructions

Unit 5: Lesson 15 - Processing Arrays

Background

Once we have stored a list of information in an array, we will want to process that data in some way. Many algorithms used to process arrays rely on an ability to inspect or change every item in a list, so they will naturally require the use of a loop. Although this can be done with a while loop, there are many small pieces to keep track of. As a result, a for loop is used to consolidate all of those pieces - counter variable, incrementing, and boolean condition - into a single command.

Vocabulary

for loop: A typical looping construct designed to make it easy to repeat a section of code using a counter variable. The for loop combines the creation of a variable, a boolean looping condition, and an update to the variable in one statement.

Lesson

• Introduction to the for loop.
• Design algorithms for processing arrays.
• Create functions which implement algorithms for processing arrays.

Introduced Code

• For loop
• Define a function with parameters

Resources

• Activity Guide - Minimum Card Algorithm (PDF | DOCX)
• Activity Guide - Card Search Algorithm (PDF | DOCX)

Continue

Student Instructions

Student Instructions

for Loop

It's very common to want to repeat a set of commands a particular number of times. Recently, we have been using the while loop to do this by creating a counting variable, setting the boolean expression, and incrementing the value of the counter by 1 each time. We've also used the for loop before, and we'll explain it more in-depth now. The for loop was created to wrap all of those components related to counting loops into a single line of code.

Programmers would typically read a loop for (var i = 0; i < 10; i++) out like this:
"for variable i starting at 0, while i is less than 10, i plus plus (or increment i by 1)"

Notice that in reading a for loop we still use the word "while".

You may notice that when you drag a for loop out from the toolbox that we've set it up for you with i as the variable.

Do This:

• Drag out the for loop.

• Insert a console.log statement inside the for loop that displays i.

• Try changing:

  • The condition to stop the loop (make it run longer).
  • The amount you change i by each time (try changing i++ to something like i += 5).
  • The starting value of i.

Student Instructions

Print an Array with a for Loop

As you know, we can use variables as indexes in an array. We can take advantage of this fact to create a for loop which visits every index in an array.

In this for loop, the i eventually gets set to every possible index in the array. You are going to use a loop of this kind to display all the values in an array.

Do This:

Starter code is provided that adds several random values to an array.

• Create a for loop that uses the syntax shown below (and above) to iterate through every index in the array.
  
• Use console.log to display the contents of the array at each index.
  
• Run the program to confirm it is displaying all the values.

Student Instructions

Updating Values in an Array with a for Loop

The for loop you set up on the last level is actually so common that we will rarely deviate from this for loop setup.

This for loop basically means "for every possible index in myArray..." and we use it as a basic building block for processing arrays. Common array-processing techniques like searching for a value, updating all values, or calculating simple stats on an array will all be completed using a for loop written with the syntax above.

In fact, we're going to see that happen right now as we use a for loop to add 5 to every value in an array.

Do This:

Starter code has been provided that creates an array of random values. You are also given a for loop that loops over every index in the array.

• Add code inside the loop to add 5 to the value at every location in the array.
  • Remember: myArray[i] refers to the element in the array at the current value of i.
• Confirm your code works by displaying the values in your array before and after your loop. Below is a sample result. Notice how, after the array has been processed, all of the values are 5 greater than the originals.

Student Instructions

Divide by 2

In the last exercise, you updated every element in an array using a for loop. Let's get a little bit more practice with the pattern you used in the last exercise, this time creating the loop yourself.

Do This:

Starter code is provided which creates an array of random values.

• Create a for loop that iterates over every index in the array.

• Within your loop, add code that divides each value in the array by 2.

• Use the provided console.log statements to confirm your program runs as expected. Below is an example of the expected outcome.

Student Instructions

for Loop with if

Sometimes we want to find values in an array that meet certain conditions. We can add an if statement inside the for loop to individually check every value within the array. To practice this, we will create a for loop that will display every value in the array greater than 5.

Do This:

Starter code has been been provided that creates an array of random values.

• Add a for loop that references every index in the array.

• Add an if statement inside the for loop that displays every value in the array greater than 5 using console.log

• Note: Because the original array is being constructed with random values it's possible that it might not have any values greater than 5. Just run the program a few times to make sure it works. An example of the possible output is below.

Student Instructions

Algorithms and General-Purpose Functions

Over the next several exercises we will be creating a general-purpose function to determine if a value is contained within an array. Over the course of these exercises, keep an eye out for the general pattern we are using, because you'll get to use it again to create functions of your own.

To begin, we'll start simple. We'll write code that checks whether an array contains a specific value. At every index, your program should display "true" if the value at that index is a 5 and "false" otherwise.

Do This:

The starter code is similar to past levels, but you'll notice that we use a loop to construct myArray rather than appending items one line at a time. You are also given the for loop you will use.

• Add an if statement inside the for loop to check if the value of the array at the current index is 5.
• If the value is equal to 5, write true to the console. Otherwise write false to the console.
• Test your code to make sure it is working as you intend. An example output is below.

Student Instructions

Counting Occurrences of a Value

Instead of displaying a true/false value for every item in the list, let's compute one value and display it. A common thing to want to do is count the number of times a value occurs. We can do this with a very small change to the code we've already got.

Do This:

Starter Code is similar to past levels. We've also created a variable called fiveCount.

• Add an if statement inside the for loop to increment fiveCount if the value is equal to 5. (Note: this will be exactly the same as the if statement you wrote in the previous level. Just giving you more practice).

• Run and re-run your code to make sure that it's accurately counting the number of 5's in the array. Since the array is getting a random set of values every time you run the program, you might have to run it a bunch of times to thoroughly test it. Make sure you get it to run at least once when no 5's appear in the array.

• Finally, if you'd like to, change the first loop in the program to add 100 items to the array instead of 10. Your code should still work to count the number of 5's, no matter how big the original array is!

Student Instructions

Print a Single True/False Value

Sometimes we don't care about the count and just want to know if the array contains a 5 or not. Let's try to display a single true/false indicating whether the list contains a 5. There are two cases to consider:

1. The list does not contain any 5's; you need to display "false".
2. The list contains at least one 5; you need to display "true".

HINT: one way to do this is to reference your counter variable fiveCount after the array has been processed.

Do This:

We've pulled your code from the previous level so you can continue to add to it.

• Add a console.log statement to display a single "true" or "false" indicating whether there is a 5 anywhere in the array.

Example output 1: One or more 5's	Example output 2: No 5's

Student Instructions

Using a Boolean Variable as a Flag

We are going to do a challenge that is similar to the last exercise but, rather than counting the number of 5's in the array, we're going to use a different interesting programming technique for processing arrays that might prove useful to you in the future.

Using a Boolean Flag

The technique is generally referred to as using a boolean "flag." To understand this idea, think about how some mailboxes work: the flag starts down, and when a person wants to let the mail carrier know there is something to pick up, she puts the flag up to notify the mail carrier that there is outgoing mail in the box.

We can use a variable to do something similar when programming. Rather than incrementing a count every time we find a 5 in the array, we will use a variable that acts like a flag. We will create a variable before the loop and assign it false to start (flag is down). Then, as we process the array, if we find a 5, set the variable to true (put the flag up).

Here is some pseudocode:

var flag = FALSE
FOR EACH item IN list
  IF (item EQUALS 5)
    flag = TRUE

DISPLAY (flag)

Notice that it doesn't matter if we find more than one 5. It will just keep setting the flag to true. However, if there are no 5's, the if statement in the loop will never execute, and so the variable will remain the value it was initialized to, which was false.

Do This:

• Implement the pseudocode above in JavaScript.
• We've given you code that constructs an array of random values, and the standard for loop for looping over an array.
• The output will be no different from the previous exercise, but you should still confirm that your program correctly identifies when a 5 is in the array.

One or more 5's	No 5's

Student Instructions

Generalize search by Making It Into a Function

You've just written code to search for a value in a list! If we could generalize this behavior, it might be useful to us in the future - it's probably something that we want to do over and over again.

Over the next few levels, we'll build up a very useful, general function for searching for any value in any list. But we'll do it one step at a time...

Do This:

Note: We've provided new starter code that implements the pseudocode from the last exercise. It also creates two more arrays that we'll be using later for testing. For this level just worry about testArray.

• Run the starter code to verify that it works correctly.
• Create a new function. Name the function search.
• Move the code that checks for a 5 inside the function. Note: You must move the boolean variable inside the function as well, or it won't reset each time you call the function!
• Call the function to make sure your code still works. The actual behavior will be the same as when you ran it the first time. The difference now is that you're calling a function to do it.

(Steps are shown in code animation below.)

Student Instructions

Generalize search by Making It Into a Function - Part 2

Right now, our function just searches for a 5 in a global array called testArray. We would like to be able to use this function to search through any array, so we will be adding a parameter to allow us to specify which array should be searched.

Do This:

• Add a parameter to the search function called list.
• Modify the code inside the function so that it loops over list (the parameter) instead of testArray (the global variable).
• Call your function with each of the arrays provided at the top of the program.

(These steps are shown in the code animation below.)

Student Instructions

General Search

In order to make a general search function, we should be able to search for any value, not just 5. We can do this by making the value to search for a parameter as well.

Do This:

• Add a second parameter to your search function to represent the item to search for. This example uses the name searchValue.

• Update the code inside the function to check for searchValue instead of 5.

• Call your search function to search for different values inside of each array.

• The console.log statement is now inaccurate. Change it to say "Array has searchValue: " followed by the value in flag.

(These steps are shown in the code animation below.)

Student Instructions

Reusing a Function Pattern: Find Minimum

Nice work! You've just written a function that implements an algorithm to process an array! If you feel comfortable with the basic pattern you used to create this function, you can quickly create functions for many other useful algorithms that work on arrays.

Basic Function Pattern

• Create a function that accepts an array as input.
• Create a "flag" variable and set its default value before looping through the array.
• Loop through your array with a for loop that visits every index in the array.
• Update your flag as necessary with every iteration of your loop.
• Display your flag at the end of the loop.

Let's use this pattern to write a function that finds and displays the smallest value in an array.

Instead of using a true/false flag to indicate whether we found a value, we'll use a variable to keep track of the smallest value we've seen in the array so far.

Do This:

Starter code has been provided which outlines and calls findMinVal with different inputs. Your job will be to finish writing the function.

• Before programming, try to develop an algorithm that you could use to find the minimum value in an array. Use the pattern outlined above as a guide.
• Write code in the places indicated with comments to complete the function.
  • You'll want to use the minVal variable to keep track of the smallest value you've found so far.
  • You'll need to write an if statement that checks whether the current value in the array is less than minVal. If it is, then update the smallest value.
• Run the code to ensure it is working as you intend.

minVal = first value in array
for EACH value IN array
  if value < minVal
     minVal = value
display(minVal)