Question

var names = ["Ringo", "John", "Paul", "George"];

for (var i = 0; i < names.length; i++) {
    alert("Say hello to " + names[i]);
}

In the code above, I assume it’s the last piece (names[i]) that’s making the index of the array change to give me the correct name. Is this true? What exactly is going on? What’s making the index change so that it will change the name? And if I were to use another label for the variable, say ‘a’, or ‘b’ or even ‘counter’, instead of ‘i’, would it still work?

Answer 1

The first part
var names = ["Ringo", "John", "Paul", "George"];
is your array definition. You are loading a JavaScript array with 4 items. Their indices in the array are as follows:

0 = "Ringo"
1 = "John"
2 = "Paul"
3 = "George"

To refer to those items individually in JS, you would do this:

var nameOne = names[0]; //nameOne = "Ringo"
var nameTwo = names[1]; //nameTwo = "John"

The for loop in your code steps through each item in the array. var i = 0 says that we’re creating a new variable to use as the index of the array. This could just as easily be var a, var b, var indexOfTheArray. Whatever.

The next part i < names.length is a condition that causes the for loop to repeat until it is met. In this case it says “loop as long as the value of i is less than the length of the array names“. array.length gives the total number of items in the array. So names.length would equal 4.

The last part is a special JS command i++. This says “add 1 to the value of i“.

Everytime the for loop reaches the closing bracket, it increments i, and evaluates the condition.

Inside the loop, i represents the current index of the array that you’re working with.

You can use names[i] as many times as you want in the for loop and it will not change until the next time you reach the end bracket and it loops back around. Then i will increment and you’ll have the next value in the array.