# Search an Array

## Searching an Array¶

Question

1. Does the array contain a specific value?
2. How do we know if an Array has a certain value?

1. Sometimes we need to search through an array to see if it contains a certain value.
2. We solve this with a loop!

Demo

1. Demo: Searching Array
• unit05/demos/demo-searching-array.html
 ``` 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71``` ``````/* This is file /unit5/searchingAnArray.js It contains the JavaScript code for "Searching an Array" File: /unit5/searchingAnArray.html */ function searchingAnArray() { "use strict"; // Declare variables let numbers; let output; let index; let search; let form; let valueFound; let outputString; // Initialize the search boolean to false valueFound = false; // Create an array of numbers numbers = [4, 6, 7, 11, 13, 16, 18, 19, 20, 21, 23, 26, 29, 35, 37, 38, 39, 41, 42, 45, 48, 51, 57, 58, 63, 66, 70, 72, 81, 88, 89, 90, 92, 93, 94, 95, 96]; // Get the form element from the HTML document form = document.getElementById("searchingAnArrayId1"); // Get the value entered into the HTML form search = form.entry.value; // Get the output HTML element output = document.getElementById("outputList"); // Check that user input is a number if (!isNumeric(search) || search === "") { outputString = "
• Not a number
• "; output.innerHTML = outputString; return false; } // Covert user input to a number search = Number(search); // Search the array for a match to the user input for (index = 0; index < numbers.length; index++) { if (search === numbers[index]) { valueFound = true; break; } } // Create output if the user input is in the array or if user // input is notin the array if (valueFound) { outputString = "
• The number " + search + " is in the array " + "and is in index " + index + "
• "; } else { outputString = "
• The number " + search + " is not in the array
• "; } // Display output to the webpage output.innerHTML = outputString; // Prevent the webpage from going to the server and refreshing return false; } ``````
Line(s) Purpose
11-17 Declare the variables we'll need.
20 Initialize our Boolean variable to false
23-25 Create an array of numbers
28 Get the `form` element
31 Get the user entered value from the form
34 Get the output element
37-41 Check if the input is a number. If entry is not a number or an empty value, output an error message and stop the function
44 If we make it to this line, we have a numeric value, so we convert it.
47-52 Search the array for the entered value. We are looping through the array until we find the value. If we find a match, we set our Boolean variable to `true` and exit the loop. If we never find it, the variable remains false.
56-63 Check to see if we found a match and generate the appropriate output.
66 Display the output
69 Return `false` to prevent browser refresh

#### Step 1. A loop.¶

• We need a `for` loop that loops through the array.
 ```1 2 3 4``` ``````// Loop through the array for (index = 0; index < numbers.length; index++) { ... } ``````

#### Step 2. An `if` statement in the loop¶

• Inside the loop we will have to have an `if` statement that compares the element in the array with the value we're searching for.

• The `search` term is what we're looking for.

• The `numbers[index]` will be one element in the array from the first to the last.

 ```1 2 3 4``` ``````// Compare search term with current array element if (search === numbers[index]) { } ``````

#### Step 3. A boolean variable¶

• Next, we need a boolean variable that is initially set to `false`.

• It has to start with `false` so if we don't find anything it will remain false.

 ```1 2 3``` ``````// Declare the boolean variable let valueFound; valueFound = false; ``````

#### Step 4. Set boolean to true in loop¶

• If our search term is equal to the current element in the loop then we need to set the boolean to true.

• It's important to realize that we don't do anything else here. We're just determine if our search term is in the array. We'll do something about it later.

 ```1 2``` ``````// Set boolean to true valueFound = true; ``````

#### Step 5. Break!¶

• If we did find something then we want to break out of the loop.

• This is important because we want to know where in the array we found the element. The `index` variable will now be set to the right location. If we don't break the index will always be at the final number in the array.

 ```1 2``` ``````// stop the loop break; ``````

#### Step 6. Do something if we found it.¶

• If our search term was found we want to do something.
 ```1 2 3 4``` ``````// Did we find it? if (valueFound) { } ``````
• Here's where we do something with the results of the search. What we do will vary with the problem we're trying to solve.

• Sometimes we want to do something only if we don't find our search term. We can do that like this.

 ```1 2 3 4``` ``````// Do something if we didn't find the search term if (!valueFound) { } ``````

Warning

All or nothing!

All of the above are necessary for a search to work. If you leave out even one step it will be very hard to get this to work. ## Labs¶

Labs

1. Lab08: Searching an Array
• unit05/labs/lab-08-array-search.html

## Exercises¶

Exercises

1. Exercise for Lab08
• unit05/exercises/exercises-08.html