Parallel Arrays

Altogether now!

Arrays in Parallel

• Until we have full Object-Orientation to work with we need to have data that that is more rich than just one array.

• One common practice is parallel arrays.

• With this technique we use more than one array and have the same number of elements in each one. The data in the arrays relates to the data in the other arrays.

• I think only an example will work here!

/*
    This is file unit05/demo/demo-parallel-arrays.js
    It contains the JavaScript code for

    "Parallel Arrays" File: unit05/demo/demo-parallel-arrays.html
*/
function parallelArraysOne() {
    "use strict";

    let states;
    let capitals;
    let output;
    let listItems;
    let index;

    listItems = "";

    states = ["Alabama", "Alaska", "Arizona", "Arkansas", "California"];
    capitals = ["Montgomery", "Juneau", "Phoenix", "Little Rock", "Sacramento"];

    output = document.getElementById("outputList");

    for (index = 0; index < states.length; index++) {
        listItems += "<li>" + states[index] + ": " + capitals[index] + "</li>";
    }

    output.innerHTML = listItems;
}

• Because the arrays are the same length, we can use the length of either one of them to run the loop test.

• The magic is that inside the loop the index refers to the same position in each array!

• Would a picture help?

This lets us do many neat tricks. Here are some possibilities:

• Display the full state name when our data only has the abbreviation.
• Expand a month from 12 to December.
• Associate an inventory item with a stock amount number.
• Search though one of the arrays and output the data from the other. We can convert data with this trick.

Labs

1. Lab09: Parallel Arrays
   • unit05/labs/lab-09-parallel-arrays.html