With lists, we can begin to store lots of data, and we can also think about writing code
to process that data.
For example, a list of the pixels in an image can be processed to change their colors to
give the image a unique, filtered look.
A digital song file is actually just a list of waveform samples, and can similarly be
processed to apply digital effects.
We know that computers are great at repeating commands in the form of loops, so when we
want to process every item in our list in a similar way, we can use a loop to iterate
through every item and take some action with it.
Let's look at how we use loops to process lists.
First, we can make a while loop to run a specific run of times by using a variable called "count".
This loop will run 6 times.
We also know that lists have numbered indexes starting at 0, and since the variable "count"
stores a number, we can use "count" as our index into the list.
And since "count" changes every time through the loop, starting at zero and going up by
1 until 5, this gives us a mechanism for accessing every item in a list.
An easy first step when processing lists is to write a loop that prints out all the values
in the list, to make sure you are seeing everything.
Let's do that here.
We'll add a console.log statement in the loop, and make the loop condition more general by
removing the hardcoded value 6, and replacing it with the length of the list.
Now, if the list size changes, our loop will still print everything out.
Let's run it.
This kind of looping structure, one that uses a variable to control the number of times
a loop iterates, has 3 basic components to it.
Creating and initializing a variable to use as a counter.
Some condition that checks the value of the counter each time through the loop.
Increasing the value of the counter by a set number for each iteration.
This kind of structure is so common that many languages include the "for loop" to do just that.
The for loop combines these components into a single line of code for convenience.
The standard set up of a for loop looks like this.
There is a lot going on here, but you can see it has the same basic components as the
while loop above.
It creates a counter variable called "i", while i<4, add 1 to i every time through the loop.
You might read a for loop out loud like this: for variable i starting at 0, while i is
less than 4, i plus-plus.
You can think of i as shorthand for index, and "i plus-plus" is shorthand for
"increase the current value of i by one".
The value of i will come in handy when we use it to access each item in the list, just
like we used the counter variable in the while loop.
Note that "i" is just a convention, and you can name it anything you want.
Let's look at an example of using a for loop to go through every item in our list,
and doing something with each item.
Here, we have a list of red, green, and blue values for a very small image.
We could brighten it up by adding 50 to every number in the list.
In each iteration of the list, we are getting the current value of stored in the pixel list at index i,
adding 50 to that number, and then updating the value at that same slot
in the list to the new value.
So the first time through the loop, i is zero.
Pixels at index i, or pixels at 0, is 28, 28+50 is 78,
pixels at index 0 is updated to be 78.
The next time through the loop, i is 1, so pixels at index 1 will be updated in the same way.
This will happen for each item in the list.
With a for loop, and a list of values, you have an easy way to process all the items
in a list.
This is a foundational concept in computer science you will see over and over again and
it unlocks the power of dealing with lots of data.