Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Karanja
John Karanja
5,839 Points

Javascript using for loops with arrays

I will really appreciate if someone would explain this piece of code for me in detail step by step. Thank you!

var students = ['Sasha', 'Lynn', 'Jennifer', 'Paul'];
for (var i = 0; i < students.length; i += 1) {
      console.log(students[i]);
}

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi John,

First of all I put some forum markdown on your JS code so I could read it a bit better. Checkout the markdown cheatsheet for the next time you want to add code to the forum :)

Okay, so I'll post the code again here and try to go through it and hopefully you'll understand what's going on a bit better :)

var students = ['Sasha', 'Lynn', 'Jennifer', 'Paul'];
for (var i = 0; i < students.length; i += 1) {
      console.log(students[i]);
}

First of all we have a string array here. You use the var keyword because an array is simply simply a variable that has multiple items.

But now that we have the items (or the values) we need to have some way to access them.

We could do this indivually by doing something like 

echo students[0];

Which would return sasha to the screen. JavaScript arrays are zero index based which is why 0 gets the first value.

However there is a more efficent way and that's with the for loop.

Loops are how you get code to repeat in a structured and non labourious way.

for (var i = 0; i < students.length; i += 1) {

First, you initialise the variable, which means give it a value to start with. Then you provide a condition to test, so you run the code inside while the code block meets a certain value. We know that there are 4 items in the students array so we could just provide a number to test the condition. (4). However we can let the browser do the work by providing the length of the students array. The length is simply the number of values in the given array.

Finally we need to provide the exit condition. Which simply means "What do we do when the condition we provided is no longer true". That's when we need to "break out" and stop looping. We then carry on with whatever else the script needs to do.

      console.log(students[i]);

The next and final part is about iteration. This is the action we perform while we're looping. We're doing this action 4 times because we're printing out the value of the array 4 times. So in this example you'd see 

SashaLynnJenniferPaul

I hope this helps and you understand a bit more what's happening with this code. :)

John Karanja
John Karanja
5,839 Points
John Karanja
John Karanja
5,839 Points

Hi Jonathan, thanks for replying. Thanks for the markdown. I cant seem to find the cheat sheet though.

I am still a bit confused as to the order of the for loop while its running. Does it move from the initializing stage, to the condition, then to code block? Or does it move from the initializing stage, to the condition, to the counter, then to the counter?

The last thing i don't understand is the console.log(students[i]); i dont understand why we have the i.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi John,

If you look for the link at the bottom of any text box on the page called "Markdown Cheatsheet" you'll see a modal window with some example code to get you started. :)

For example

Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.

As far as the order of the loop goes, it kind of works as a loop in itself because not only does it have to run the code inside the loop, but it keeps going until the condition is checking is met. That's what the semi colons inside the loop are for 

for (var i = 0; i < students.length; i += 1) {
  • First you initialise the variable so the loop knows where the condition starts. We see this with a variable called i which is declared and given a value.
  • Next, i is referenced again. The variable currently has the value of 0 because it hasn't yet gone through the condition check and been modified. We're checking that i is less than the number of items in the students array. i is zero which is less than 4.
  • So we go to the third step and add 1 to the value of i.

We keep going through all these steps until i is not less than 4. The length of the students array.

Finally we have the block of code inside the loop.

console.log(students[i]);

We're logging the values of the students array to the screen. We're using the i variable to display the items dynamically. If we used the array index to do this we'll simply output the value that index holds 4 times. Doing it this way allows us to get all the different items to the screen or in this case the console.

Hope this clarifies things :)

John Karanja
John Karanja
5,839 Points
John Karanja
John Karanja
5,839 Points

Thanks Jonathan i finally found the cheat sheet, i was right clicking and opening a new tab instead of just clicking it. :) Thanks for your explanations i really appreciate it. I understand everything a bit clearer now, i just need more practice to grasp them completely.

Thanks again!