Using For Loops to Access an array

Question

Got some questions about how a function interacts with an array. My questions are within the code...

var playList = [
  'I Did It My Way',
  'Respect',
  'Imagine',
  'Born to Run',
  'Louie Louie',
  'Maybellene'
];

function print(message) {
  document.write(message);
  /*the argument name must corrolate with the method that is used in the function*/
}



function buildList(list){ /*the argument list is passed into the function, what in the the function tells it we are minipulating the playlist?
        Shouldn't there be a word in there that matches playList?*/

        listHTML = '<h2>'; /*Why is it okay to use a '+=' operator here but not on the same variable with the closing tag below?*/

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

                listHTML += '<li>' + list[i] + '</li>';
                /*The [i] runs through the entire array list*/
            }

        listHTML += '</h2>';    

        print(listHTML); /*why would you print it inside the function? Won't that make it local instead of global? 
        Don't you want it global so you can call it?*/


}


buildList(playList);

Answer 1 · 2017-05-01T16:35:54Z

May 1, 2017 4:35pm

Hi Greg,

I'm trying to get to grips with this myself and, like you I think its finally beginning to sink in.

Rather than telling you how it is from the POV of an expert, here's how I am interpreting it as a learner:

The key part in this seems to be when the function is called: printList(playList);. The array is passed into the function via the argument playList which takes the place of the list parameter in function printList( list ). list.length effectively becomes playList.length and list[i] becomes playList[i].

Similarly print(listHTML); calls the print(message) function and replaces the message parameter with the argument listHTML, which was the variable created inside the printList( ) function.

It might have been easier to understand if the message and list parameters inside the function parentheses had said listHTML and playList instead, but it really doesn't matter as they are basically only placeholders for the arguments that are passed into the functions when they are called.

Here's how it could be rewritten, with comments added about what I believe is happening:

//Loops through an array called playList and prints each item to the page.

//Array called playlist containing a list of songs
var playList = [
  'I Did It My Way',
  'Respect',
  'Imagine',
  'Born to Run',
  'Louie Louie',
  'Maybellene'
];

//Function called print with a parameter of listHTML (but this can be anything: an argument 
will be added when the function is called)
function print(listHTML) {
  document.write(listHTML);//Prints listHTML to the page when the functions is called.
}

//Function called printList with a parameter of playList (but this can be anything: an argument 
will be added when the function is called)
function printList(playList) {
  var listHTML = '<ol>';//Create a variable called listHTML with the value of an opening ol tag
  for ( var i = 0; i < playList.length; i += 1) {//Loops through the playList parameter set above
    listHTML += '<li>' + playList[i] + '</li>';//Concatenates a list using the items in parameter 
    set above.
  }
  listHTML += '</ol>';//Adds an ending ol tag to the listHTML variable
  print(listHTML);//Calls the print() function declared above and passes listHTML variable 
  as an argument
}
printList(playList);//Calls the printList() function and passes it the playList array as an argument. 
This creates the list and prints it to the page.

Expert rebuttals/corrections welcome.

Answer 2 · 2017-04-19T14:04:31Z

April 19, 2017 2:04pm

Great! Much more clearer.

what is the purpose of the 'list[i]' within the function? I know it runs through the array, but why can't I use that to run through the entire array and print it out outside the function?

I think I will review the functions and conditionals to ensure I understand them as clearly as I should.

Answer 3 · 2017-04-19T14:27:19Z

April 19, 2017 2:27pm

okay, I reviewed the videos, I understand why 'list[i]' is used in for loops for run through the array. I guess I didn't have the light go off as to what it was for until I reviewed for it.

Answer 4 · 2017-05-04T22:28:27Z

May 4, 2017 10:28pm

Hi Greg,

Looks like you got it already, but if only to help deepen my own understanding here is another go at explaining list[i]:

list refers to the parameter set in the function declaration function buildList(list).

list has no meaning in itself but is a placeholder for the argument to will be passed to it when the function is called later using buildList(playList).

list now holds the playList array.

In the for loop, list.length now refers to the number of songs in the playList array, which is 6.

It loops through the array adding <li> tags to create a formatted HTML list of 6 songs for when the list is printed to the page by the print(listHTML) function.

The i in the loop is also a placeholder that starts off at position 0 ('I Did It My Way') and then incrementally loops through the array to position 5 ('Maybelline').

So each time through the loop, the function looks at the playList and references the song at the appropriate position.

I hope that helps. It certainly helps me to explain it to myself.

As part of my own study, I've started keeping .js files containing notes explaining the theory and examples of code that I've gone through and commented in detail explaining to myself what each line is doing and how it relates to the whole.

This is very enlightening and its helping me to better understand what I'm doing.

Welcome to the Treehouse Community

Looking to learn something new?

Greg Schudel

Greg Schudel

Using For Loops to Access an array

Mark Miller

Mark Miller

4 Answers

Alan McClenaghan

Alan McClenaghan

Greg Schudel

Greg Schudel

Greg Schudel

Greg Schudel

Alan McClenaghan

Alan McClenaghan