In JS Basics 1 we discussed functions and variables and how they relate to each other. In this post, we will focus on arrays and how we can iterate over them with for and while loops.

The problem

We have a series of numbers.

  // our numbers
var num_1 = 10, num_2 = 20, num_3 = 30, num_4 = 40, num_5 = 50;

We need to get the sum of these numbers. To do this, we can simply add the variables.

  // adding our numbers
var sum = num_1 + num_2 + num_3 + num_4 + num_5; // = 150

This works, but could be much more dynamic. Here we are explicitly adding up all of our numbers. What happens when we have six numbers? Four? Zero? We would need to change our code drastically because it has no flexibility.

Arrays

Arrays are how we store collections of data in Javascript. Our series of numbers would be best described and most efficiently stored in an array:

  // verbose numbers
var num_1 = 10, num_2 = 20, num_3 = 30, num_4 = 40, num_5 = 50;
// concise array
var nums = [10, 20, 30, 40, 50];

Items in an array are referred to on a zero-index. 0 = first position, 1 = second position, etc. So if we were to say nums[0], we would be referring to 10.

  // adding our array’s numbers
var sum = nums[0] + nums[1] + nums[2] + nums[3] + nums[4]; // = 150

As you can see, we can run the same expression with our array as we did with the individual variables. This is a slight improvement because we are storing our data more efficiently, but there is still a hard-coded reference to each value in the array.

“For” Loops

We want to be able to add the contents of our nums array, no matter how many values are in it. To do this, we can use a for loop.

  var nums = [10, 20, 30, 40, 50], // our nums array
    sum = 0; // put our sum variable up here and initially set it to 0

// incrementing for loop
for (var i = 0; i < nums.length; i++) {
    // add the value to sum
    sum += nums[i];
}

// sum now equals 150 down here

Our for contains three statements.

The first statement var i = 0; executes prior to the loop running.

The second statement i < nums.length; is a condition that keeps the loop running. In this case it is saying, “while variable i is less than the length of (amount of items in) nums”.

The third statement i++ executes at the end of each loop. i++ is a shortcut for i = i + 1. This makes variable i increase by 1 each loop.

Since its initial value is 0, it will run 5 times. Each time it loops, i is the incremental value (0, 1, 2, 3, 4). If we set our second statement to be “less than or equal to”, i <= nums.length;, it will run 6 times.

If we accidentally set our second statement to be “greater than”, i > nums.length;, our loop would not run since the first time around it would already have not met the condition.

There is another way we could do this for loop:

  // decrementing for loop
for (var i = (nums.length - 1); i >= 0; i--) {
    // add the value to sum
    sum += nums[i];
}

// sum still equals 150 down here

Can you see the difference? We are decrementing instead of incrementing. Note that when we set variable i, we set it to be 1 less than the length of nums. Why? Our array is zero-indexed. The value of i is fed through the loop as follows: 4, 3, 2, 1, 0.

The result of these two loops is exactly the same, but the sequence in which the numbers are processed is different. Depending on what you are doing inside of the loop, decrementing or incrementing may make more sense.

Complexity

What if we wanted to multiply the last item by the sum of all the other items?

  var nums = [10, 20, 30, 40, 50],
    sum = 0,
    product = undefined;

// incrementing for loop
for (var i = 0; i < nums.length; i++) {
    if (i < nums.length - 1) {
        // add the value to sum
        sum += nums[i];
    } else {
        // subtract the last value from the ongoing sum which is 100
        product = sum * nums[i];  
    }
}

// product equals 5000 and sum equals 100 down here

Inside of the loop, we detect if the i value is less than the amount of numbers - 1. More simply, whether or not it is not the last number. Remember that the loop starts at 0 because of the zero index, so we need to say < instead of <=. If the number is not the last number, increase the value of sum by the number's value. By the time the if condition is false and we hit the else, we have a total sum of our first four numbers. Then we set product to be the product of that sum by that last number.

If we used our decrementing loop, the multiplication would happen in the first loop, while sum is still equal to 0

  var nums = [10, 20, 30, 40, 50],
    sum = 0,
    product = undefined;

// decrementing for loop
for (var i = (nums.length - 1); i >= 0; i--) {
    // i == 4 the first time around making this if condition false
    if (i < nums.length - 1) {
        // add the value to sum
        sum += nums[i];
    } else {
        // subtract the last value from the ongoing sum which is 0
        product = sum * nums[i];  
    }
}

// product equals 0 and sum equals 100 down here

In this case, whether or not we are decrementing or incrementing is incredibly important. This illustrates the basic logic behind why you may have a need for a decrementing loop instead of an incrementing one.

Bringing it all together

Pairing these principles with the array push method, we can generate an array of 10 random numbers, and get the average of them.

  var nums = [], // an empty nums array
    count = 10, // we want to generate 10 numbers
    sum = 0;

// incrementing for loop to create numbers
for (var i = 0; i < count; i++) {
    // create a random number between 0 and 100
    var num = Math.random() * 100;
    // push num into nums array
    nums.push(num);
    // add the random number to the ongoing sum
    sum += num;
}

// get the average number out of the array
var avg = sum / nums.length;

We start with an empty nums array to fill with our numbers, define how many numbers we want to generate with count, and set the initial sum to 0. Inside of our loop, we generate a random number, add it to the array, and increase the sum by its value. This repeats 10 times. When we define the avg after the loop, sum will equal the sum of the array of random nums. So we divide it by the length of the nums array (we could also divide by count) to get the average.

"While" Loops

If you can wrap your head around the logic of for loops, while loops should come fairly easily.

  var nums = [10, 20, 30, 40, 50],
    looping = true,
    i = 0;

while (looping) {
  console.log(nums[i++]);
  if (i == nums.length) looping = false;
}

A common case for a while loop is a boolean value that is true until a certain point. In this case, we have named that value looping. It is set to true by default. This value will remain true until our i value is increased to the amount of items in the nums array.

What is interesting here is that the i++ which you may recognize from our for loop is the reference to the index of nums. Essentially, nums[i++] is equivalent to nums[i]; i++; The increment happens after using the current value of i as a reference. The added benefit is that we are writing less code.

By the time our loop hits the if condition, it has been incremented to the value used in the next loop. Here, once i is equal to 5, it kills the loop by setting looping to false. Can you guess what would happen if the if statement came before the console.log?

The correct answer is that it would run an extra time and log undefined for the last value. Can you figure out why?

Manipulating arrays

I can’t finish this post without saying something about array manipulation. I couldn’t find a better place to put it, so it’s going here.

We can mainpulate arrays in many ways. We can sort from lowest to highest...

  var nums = [20, 40, 30, 10, 50];
nums.sort( function(a, b) {
  return a - b;
});

// [10, 20, 30, 40, 50]

...or sort from highest to lowest.

  var nums = [10, 20, 30, 40, 50];
nums.sort( function(a, b) {
  return b - a;
});

// [50, 40, 30, 20, 10]

We can add a number to an array...

  var nums = [10, 20, 30, 40, 50];
nums.push(60);

// [10, 20, 30, 40, 50, 60]

...and then remove a number from the array.

  var nums = [10, 20, 30, 40, 50, 60],
    index = nums.indexOf(10);
nums.splice(index, 1); // starting at index, remove 1 item

// [20, 30, 40, 50, 60]

We can even get a string of the array data, with a | between each number:

  var nums = [10, 20, 30, 40, 50];
nums.join(" | ");

// "10 | 20 | 30 | 40 | 50"

As you can see, manipulating arrays with loops is quite useful even though it can get fairly complicated. I know that this stuff can seem out of reach at times; this was the biggest hurdle for me when I was first digging into Javascript. Rest assured, once you get it, everything starts to make a lot more sense very quickly.

Keep at it!


I am Jake Albaugh and am going to write this bio in first person. These days, I write on CodePen because I care more about it and you than I do about my personal site. Read more articles via my CodePen blog page. View my work on my CodePen profile. Or if you’re a hip millennial, “get at me” on my twitter @jake_albaugh.