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?

Answer

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

/*
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 = "<li>Not a number</li>";
        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 = "<li>The number " + search
                + " is in the array " + "and is in index "
                + index + "</li>";
    } else {
        outputString = "<li>The number " + search
                + " is not in the array </li>";
    }

    // 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

The Steps in a Search

Step 1. A loop.

• We need a for loop that loops through the array.

// 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.

// 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.

// 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.

// 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.

// stop the loop
break;

Step 6. Do something if we found it.

• If our search term was found we want to do something.

// 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.

// 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