Is a Javascript for loop giving you the what-for?

I first learned of the existence of a for loop when I began to teach myself Python and boy, was I confused about every single aspect of it. Initialization? Iteration? Complete nonsense as far as I was concerned. Well, I didn't follow through in teaching myself Python (~3 years ago now) and I now have my sites set on learning web development (~2 years now spent on teaching myself currently). I'm here to (hopefully) help you demystify how a for loop operates, as well as elaborate on some of the more common structure that's associated with a for loop.

So what is a for loop anyways? We use for loops when we want to repeat some kind of action over and over until a given condition is met. One purpose for this is to average out an array (list) of numbers. Say we want to find out our grade average for a class we're taking. We can declare a variable, gather all of these grades and place them in an array, like so:

let grades = [78, 81, 87];

We'll also want to declare a variable that we can access later in our for loop to sum all of the grades up. We can set this variable to 0 to initialize it and call it sum. All initialization means is declaring a variable for later use and having it's value be 0 so that a different numeric value can occupy it later:

let grades = [78, 81, 87]
let sum = 0;

In Javascript, we enter into a for loop when we declare for and then follow that up by placing parentheses after it (), like so:

let grades = [78, 81, 87]
let sum = 0;

for()

Within the parentheses are the parameters we wish to set for our for loop. Traditionally, the first parameter we put is i = 0. This declares a variable, i, and initializes it to 0, so that we can use it within the for loop:

let grades = [78, 81, 87]
let sum = 0;

for(i = 0)

The next parameter we typically place in the for loop's parentheses is the conditional declaration. This can be anything from saying "while i is less than..", "while i is greater than..", etc. The idea is that, while that condition remains true, the loop will keep repeating. For our purposes, we want to average out some numbers, so we want our condition to cycle through all of our grades and when it's done adding up all of our grades, we want it to exit the for loop. So, we want our condition to say "while i is less than the length of the array". This is accomplished with:

let grades = [78, 81, 87]
let sum = 0;

for(i = 0; i < grades.length)

I didn't explain it much, but the .length property is just a built-in feature that Javascript has. For our purposes, this is just pertaining to the length of our "grades" array, which is equal to 3. Oh and, all of the parameters we place in our for loop's parentheses are separated by ;. Very important to know!

And lastly, we want the for loop to iterate through every index (value) in our array, which is accomplished by auto-incrementing i with i++. This plays in heavily to the conditional factor that we placed in the parameter before (i < grades.length). The i is the incrementor that will help us know when to exit the for loop. Each time the for loop does one "loop", this i will increase by one. So instead of i = 0, i will equal 1 (i = 1) after the first "loop" and will keep going until i = 3, at which point, the for loop will stop:

let grades = [78, 81, 87]
let sum = 0;

for(i = 0; i < grades.length; i++)

Now we can begin to get into the meat of the for loop. After we declare the parameters for our for loop, we can open up the actual substance or object of the for loop! We place curly brackets ({}) after the end of the parameter, like so:

let grades = [78, 81, 87]
let sum = 0;

for(i = 0; i < grades.length; i++) {

}

Everything in between those curly brackets is the logic or "meat" of the for loop. For our purposes, we're wanting our for loop to go through each and every index (or value) in our grades list and add them up, one by one. We can accomplish this by referencing our sum variable that we declared earlier and having it be equal to itself, plus whatever grade it's adding up at any given moment in the array, like so sum = sum + grades[i]:

let grades = [78, 81, 87]
let sum = 0;

for(i = 0; i < grades.length; i++) {
  sum = sum + grades[i];
}

A shorthand to declare sum = sum + grades[i] is sum += grades[i]. We'll use this for the remainder of our for loop:

let grades = [78, 81, 87]
let sum = 0;

for(i = 0; i < grades.length; i++) {
  sum += grades[i];
}

So the logic thus far is that the for loop will run through all of the values in our array and add them up, one by one, until it gets to the very last value of 87 and then it will exit the for loop. Our sum will be equal to 246. Now we need a way to divide that sum by 3 to determine our grade average. This can be accomplished by declaring a variable (let's call it avg) and dividing sum by 3, or the length of our array, using .length. Be sure to put this logic outside of our for loop logic!:

let grades = [78, 81, 87]
let sum = 0;

for(i = 0; i < grades.length; i++) {
  sum+= grades[i];
}

let avg = sum / grades.length;

Our output for avg should be 82. Congratulations! We made a B! Not too shabby, eh? ;)

If you have any questions, please feel free to let me know. I'm also extremely open to constructive criticism, as this is my first-ever post on teaching about this stuff, so I'll need all the help I can get. Thank you for reading this far!