KIEI-451: Loops

With all the modern advances in technology, the human brain still has a huge advantage in terms of storage, processing power, and energy efficiency when put up against a computer's brain. The one thing a computer has on us though? The ability to process a large amount of information quickly within its memory. With loops, we're going to start using the processing power of the computer in order to apply logic to data, and get answers to questions a lot more quickly than we could find ourselves.

Picture this: we've collected the driver's licenses or ID cards of everyone in this class in your hand. Our task is to figure out how many people have brown hair and are shorter than 5'8" tall. This would take us some time – we'd have to flip through each card, making sure we have the data correct, tallying the results somewhere, making sure we don't count someone twice or miss anyone. Worse still, if we added another 100, or maybe even 1000 cards to the job, we'd be in for a long night.

For a computer, this task is trivial. If we had even the most basic of databases or a CSV file to work with, this job could be done for thousands, even millions of people, in a matter of seconds.

It all starts with looping through the humble Array. To get things started, we're going to look at the same problem, with and without loops:

        let burgerIngredients = ['buns', 'ground beef', 'cheese', 'onion', 'lettuce', 'tomato', 'ketchup']

        console.log(`remember to buy ${burgerIngredients[0]}`)
        console.log(`remember to buy ${burgerIngredients[1]}`)
        console.log(`remember to buy ${burgerIngredients[2]}`)
        console.log(`remember to buy ${burgerIngredients[3]}`)
        console.log(`remember to buy ${burgerIngredients[4]}`)
        console.log(`remember to buy ${burgerIngredients[5]}`)
        console.log(`remember to buy ${burgerIngredients[6]}`)

The task is to simply print each ingredient to the JavaScript console – easy enough. This code certainly does the job. However, there are two, very clear issues with this:

The unknown – if we don't know how many ingredients are in the list?
Inefficiency – even if we did, what if there are thousands of ingredients?

Let's write the first example, this time with a loop:

        let burgerIngredients = ['buns', 'ground beef', 'cheese', 'onion', 'lettuce', 'tomato', 'ketchup']
          
        for (let i = 0; i < burgerIngredients.length; i++) { 
          console.log(`remember to buy ${burgerIngredients[i]}`) 
        }

Let's look at this code in finer detail. The for keyword means "we're going to do this a few times". Inside the parentheses, we then provide a small amount of code that determines exactly how many times we're talking about. Although we are almost always simply doing something for each element of the Array, this code allows our logic to be flexible – in this course, you'll never do anything differently than this. In any case, it is always in three parts:

Create a variable to use – you can call this variable anything you want – in this case, it's i.
Specify a condition where we'll continue to loop, i.e. continue running the code that follows within the curly braces ({}). If this condition returns false, the loop ends. In this case, we'll continue to loop as long as i remains less than the Array's length, i.e. number of elements.
Finally, we increment our counter variable by 1 with each iteration of the loop. The ++ syntax is simply shorthand for i = i + 1.

From the computer's perspective, a loop doesn't do anything differently than what we did in the first example – it just solves the unknown and inefficiency problems stated above. Now, it doesn't matter how many ingredients are in the burger – our code processes them all. And it doesn't matter if there are 5, 10, or 10000 ingredients in the list. The computer's brain is capable of running this code so fast, we won't even notice.

A side note: in game development or scientific computing, there may be a reason for a loop to traverse random or physics/simulation data, but in business programming, the main use-case for a loop is to iterate through an Array.

Lesson 4: Loops