Confused about loops arrays in JavaScript

Question

In the most recent video I watched, we're learning about arrays. He did an example, and I understand what everything is doing, I'm just not exactly sure why.

I'm confused where the "i" is coming from, and why it's then being called upon, and how all that works.

var friends = ["Nick", "Michael", "Amit", "John"]

var friendNumber = 1;
console.log(friends[friendNumber]);

for (var i=0, i < friends.length; i+=1) {
   console.log(friends[i])
}

I understand the first part, where the array friends is being made up of the four names.

I also understand that in the for loop, the first part is setting i = the first friend in the array. If i is less than the length of the array "friends," than it'll move up the list by one. I understand that after this happens, it'll log i in the console.

This all being said, what is this i, and where did it come from? What is happening in the statement, console.log(friends[i])?

Does it have to do with the friendNumber part, because that part also went over my head.

Answer 1 · 2014-10-12T06:35:29Z

October 12, 2014 6:35am

Joe,

The i is simply a variable that is commonly used in these types of situations/loops, as it is short for index, which is what it is standing in for (for example, in friends[i]): the index value of the array that you're looping through.

As with any other variable, you could name that literally anything you wanted to, such as x, or thisIsAVariable, or friendIndex, or even banana. It is simply the name of a container in which you are holding the current index number as you iterate through each element in the given array.

At the beginning of the loop, you declare your variable (here, and commonly, named "i"), and set it equal to an initial value of "0" (though you could also set it to 1, 2, 3, 4, etc. - setting it to 0 just ensures that you start at the beginning of the array that you want to iterate over).

Then, as you iterate through the array, you place whatever value happens to currently be assigned to the variable of "i" (e.g. for the first pass, the value assigned is 0, so friend[i] actually translates to friend[0], and then on the second iteration, because of the i++ order, the value of i increments by one, thus making the value of 'i' then equal to '1', so friend[i] would translate to friend[1], etc.).

This allows you to pass over each element in the array and apply the logic in the code block within your for loop to them as you come across them.

Hope this helps to clear up some of the confusion!

Erik

Answer 2 · 2014-10-13T04:04:22Z

October 13, 2014 4:04am

Easiest way to understand this is from the inside out ...

Get the current value of i which we are using as a counter with our for loop
- The first time the for loop runs i = 1
Look in the array named friendsand find the value that is at the position of the number currently stored in i
- So we resolve friends[i] to be friends[1]
Then log the value you found in last step
- If we check our array, we would see that Michael is at index 1 (as array are zero-indexed)

Welcome to the Treehouse Community

Looking to learn something new?

Joe Williams

Joe Williams

Confused about loops arrays in JavaScript

2 Answers

Erik McClintock

Erik McClintock

James Barnett

James Barnett