Loops

Computers excel are doing repetitive tasks without making mistakes - let's learn to take advantage of that.

Quick Review

So far we have learned some very important foundational concepts regarding JS. Essentially, we have learned how to keep track of discrete pieces of data (single value primitives) along with a collection type: Objects.

Everything in JS is an Object except for primitives.

When we create our own Objects, we differentiate those from those Objects built in to JS by specifying that we are creating an Object Literal.

There are other collection types in JS that extend from this Object Prototype, such as Arrays. We'll address some of these other concepts a bit later on.

Overview of Loops

One reason why computers are so incredibly helpful is that given specific instructions (by us developers, for instance), a computer can perform these instructions repeatedly without error virtually forever. This process or repeating the same procedure over and over is known as iterating, and is the driving force behind loops.

while

Let's start by creating a while loop. while loops repeat instructions that are scoped inside of {} for as long as a condition is true (think boolean).

Here's an example showing how to log the numbers from 1 to 10 with a while loop.

/**
 * We need a variable to keep track of where we currently are in our count.
 * We use 'let' b/c this value will have to be
 * replaced/re-assigned as we proceed.
 */
let currentNum = 0;

/**
 * while (some condition is true) {
 * execute some code.
 * }
 *
 * Here, we are using a COMPARISION OPERATOR <=.
 * This means 'less than or equal to.'
 * So, we want this 'while' loop to run
 * AS LONG AS our currentNum has not surpassed 10.
 */
while (currentNum <= 10>) {
  console.log(currentNum);

  /**
   * We increase currentNum by 1 after each 'log'.
   * This is critically important in a 'while' loop. Why? 🤔
   */
  currentNum += 1; // currentNum = currentNum + 1;
}

Great! You've learned another fundamental concept for programming - looping. You should do a git add and git commit -m.

for

Now, let's learn about a slightly 'better' approach (generally speaking) - for loops.

Here's the same program using a for loop.

// for(some starting condition; some ending condition; some iteration interval)
for(let i = 0; i <= 10; i += 1) {
  console.log(i);
}

Notice how much shorter that is (comments notwithstanding)? Also, notice that the for loop tends to be more 'self contained' than a while. Notice that the currentNum was replaced with i (a convention to represent an iterator), but even more importantly, for did not have to reach outside of its scope. A while always needs to reach outside of its scope!

You should do a git add and git commit -m.

Loops App - Sum Numbers from 1 to 10

/**
 * Developer's Note: It's nice to write out a brief description of
 * what the program does followed by
 * the 'logic' steps needed for it to do its job.
 *
 * However, feel free to clean up these comments a bit once you are done
 *  before you 'commit.'
 */

// Add the numbers from 1 to 10

/**
 * Create a loop that starts at 1 and ends at 10.
 * Keep track of the current count.
 * Keep track of the 🏃🏾‍♂️ total.
 */

let currentNum = 0;
let currentTotal = 0;

while(currentNum <= 10) {
  currentTotal += currentNum;

  currentNum += 1; // currentNum = currentNum + 1;
}

console.log(currentTotal);

TODO: Write a similar program using a 'for' loop.

Reflect on the differences between while and for. What are some advantages/disadvantages?

Recommendation: You should avoid copying/pasting these examples. Instead, read them over and then try to recreate them in VS Code. With the help of 'IntelliSense' (the cool feature of VS Code that auto-completes our code) and linting, try to retype all the things, and only reference the examples above as necessary.

Note: You should commit early and commit often. Going forward, this will not be explicitly mentioned in this book, but, generally speaking, a good time to commit is probably after each 'section,' at a minimum.