17: Sequences and For Loops

Most programming languages have some way to store data inside the computer. For some languages that storage is just raw memory locations, but programmers easily make mistakes when that's the case. In modern languages you're provided with some core ways to store data called "data structures". A data structure takes pieces of data (integers, strings, and even other data structures) and organizes them in some useful way. In this exercise we'll learn about the sequence style of data structures called a "list" or "Array" depending on the language.

JavaScript's simplest sequence data structure is the Array which is an ordered list of things. You can access the elements of an Array randomly, in order, extend it, shrink it, and most anything else you could do to a sequence of things in real life.

You make an Array like this:

let fruit = ["apples", "oranges", "grapes"];

That's all. Just put [ (left-square-bracket) and ] (right-square-bracket) around the Array of things and separate them with commas. You can also put anything you want into an Array, even other Arrays:

let inventory = [ ["Buick", 10], ["Corvette", 1], ["Toyota", 4]];

In this code I have an Array, and that Array has 3 Arrays inside it. Each of those Arrays then has a name of a car type and the count of inventory. Study this and make sure you can take it apart when you read it. Storing Arrays inside Arrays inside other data structures is very common.

Accessing Elements of an Array

What if you want the 1st element of the inventory Array? How about the number of Buick cars you have on inventory? You do this:

// get the buick record
let buicks = inventory[0];
let buick_count = buicks[1];
// or in one move
let count_of_buicks = inventory[0][1];

In the first two lines of code (after the comment) I do a two step process. I use the inventory[0] code to get the first element. If you're not familiar with programming languages most start at 0 not 1 as that makes math work better in most situations. The use of [] right after a variable name tells JavaScript that this is a "container thing" and says we want to "index into this thing with this value", in this case 0. In the next line I take the buicks[1] element and get the count 10 from it.

You don't have to do that though as you can chain the uses of [] in a sequence so that you dive deeper into an Array as you go. In the last line of code I do that with inventory[0][1] which says "get the 0 element, and then get the 1 element of that".

Here's where you're going to make a mistake. The second [1] does not mean to get the entire ["Buick", 10]. It's not linear, it's "recursive", meaning it dives into the structure. You are getting 10 in ["Buick", 10]. It is more accurately just a combination of the first two lines of code.

For-loops

Once you have an Array you then typically want to go through all the elements of the Array. In JavaScript you have 3 main ways you'd do that:

1. Use a while-loop, and then index into it.
2. Use a for-loop, and index into it.
3. Use a for-of loop, and get each element automatically.

In the code that follows I do all three so you can see how it's done, but I recommend to use option #3 as much as possible.

The Code

Type in all this code and try to guess what's going on before you read the description. You should pay attention to how I use pigments.length to get the number of elements in the pigments Array.

let pigments = ["perinone", "cadmium",
    "titanium", "ultramarine", "napthol"];

let i = 0;
// you've seen this already
while(i < pigments.length) {
    console.log(`while ${i}=${pigments[i]}`);
    i++;
}

// you can do the above in one move like this
for(let i = 0; i < pigments.length; i++) {
    console.log(`for ${i}=${pigments[i]}`);
}

// but this is the easiest of all
for(let paint of pigments) {
    console.log(`for-of ${paint}`);
}

Remember that programming is all about taking different tools and combining them. You know how to index into an Array (inventory[0][1]), and you know how to count with a while loop, so you know how to go through each element by combining the two. The first part is simply that.

A for(;;) loop is simply a convenient combination of "increment a number and while loop". It has all the elements, but they're organized in the for-loop format so that you don't forget each component. To correctly use a for-loop you need to remember:

1. Set up i = 0.
2. Test i < pigments.length.
3. Increment i++.

The for-loop is notorious for making it hard to remember to do all of these things. The for-loop has sections separated by ; for each part. That means for(let i = 0; i < pigments.length; i++) means let i = 0 is the setup i < pigments.length and i++ is your increment.

The final version of this kind of loop is the for-of loop, and it's the best one to use when iterating through an Array. The for-of handles all the work of setting up a counter, testing that it's gone through each element, indexing into the Array, and incrementing to the next element. It does this all for you then simply gives you each element in a new variable named paint. It also reads more like English where you would say "for each paint in my Array of pigments...".

What You Should See

$ node "code.js" 
while 0=perinone
while 1=cadmium
while 2=titanium
while 3=ultramarine
while 4=napthol
for 0=perinone
for 1=cadmium
for 2=titanium
for 3=ultramarine
for 4=napthol
for-of perinone
for-of cadmium
for-of titanium
for-of ultramarine
for-of napthol

Everything Looping

Before you continue you should experiment with all the features of looping that JavaScript has. This code is a puzzle that has most of the features in it, most importantly the ideas of break, continue, and using labels to specify where to break and continue.

let count = 5;
label1:
while(count > 0) {
    console.log("in while", count);
    if(count > 2) {
        for(i = 0; i < 4; i++) {
            console.log("in for", i);
            if(i == 2) {
                count--;
                continue label1;
            }
        }
    } else if(count == 2) {
        count -= 2;
        console.log("continue in while");
        continue label1;
    } else {
        break;
    }
    count--;
}

label2:
console.log("Done.");

You should study this code and watch the video so that you can see how this works.