JavaScript JavaScript Loops, Arrays and Objects Tracking Multiple Items with Arrays Using For Loops with Arrays

Hui Zheng
PRO
Hui Zheng
Pro Student 1,380 Points

I didn't understand the functions

First, I did everything according to what the instructor had done in the video but I couldn't print out the same list on the browser as he did. I am not sure what I had done wrong here. I didn't understand the purpose of having this function in the code function print(message) { document.write(message); }. In the second function, how come list was passed in as a parameter instead of playList because playList was the variable we declared to store the array. I didn't quiet understand why we needed to have two print statements on the bottom instead of one.

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

function print(message) { document.write(message); } function printList(list) { var listHTML = '<ol>'; for(var i = 0; i < list.length; i++){ listHTML += '<li>' + list[i] + '<li>'; } listHTML += '</ol>'; print(listHTML); } printList(playlist);

2 Answers

Steven Parker
Steven Parker
176,605 Points

The "print" function may seem odd since it only calls another function, but it gives the code a single point where you can change how output is done in the future.

In the second function "list" is the name of the parameter, but it is not what is passed in. The function is called on the very last line, "printList(playlist);", where you can see that playList is being passed to it.

I'm not sure what you mean by "two print statements on the bottom". Were you possibly confusing "print" and "printList"? Those are not the same thing, and one is part of the definition of the other.

Hui Zheng
Hui Zheng
Pro Student 1,380 Points

Yes, Professor. The print and printList statements at the bottom and the parameters that were passed into them really threw me off. So the print function calls another function which function did it call. I don't understand what you meant when you stated it gives the code a single point where you can change how output is done in the future. Thanks

Hui Zheng
Hui Zheng
Pro Student 1,380 Points

Is the print function sort of like the document.write() function by printing out messages on the browser? I don't understand why two print statements were employed here, one was the print(listHTML) and the other was printList(playlist). I assumed they kind of worked the same way except these two statements were named differently.

Steven Parker
Steven Parker
176,605 Points

As I said earlier, the "print" call is inside the definition of the other function. It is not being called in the main code.

The main code only calls "printList".

Hui Zheng
Hui Zheng
Pro Student 1,380 Points

Hi, Professor Parker. I did everything exactly the same as what the instructor had done from the video, but my output was a web page with only the title without the playlist. I had absolutely no ideas of what I had done wrong here. In terms of the functions, I believe I understand how they work now after I studied them yesterday. Within the functions' block of code, there was the document.write(); command so when the function was called the command also got activated and thus printing out the output on a webpage. But what really bothered me the most was why songs was passed in as the parameter in lieu of playList. I didn't fully understand why playList was not passed in as the parameter directly but rather got reassigned to the parameter songs. I also couldn't figure out what I had done wrong with the code because it wouldn't print out the playlist .

var playList = [ ['I did it my way', 'Frank Sinatra'], ['Respect', 'Aretha Franklin'], ['Imagine', 'John Lennon'], ['Born to Run', 'Bruce Springsteen'], ['Louie Louie', 'The Kingsmen'], ['Maybellene', 'Chuck Berry'] ];

function print(message){ document.write(message); }

function printSongs(songs){ var listHTML = '<ol>'; for(var i = 0; i < songs.length; i++){ listHTML = '<ll>' + songs[i][0] + ' by ' + songs[i][1] + '</l1>; } listHTML += '</ol>'; print(listHTML); } printSongs(playList);

Steven Parker
Steven Parker
176,605 Points

Just like "list" in the first example code, "songs" is the name of the parameter, but it is not what is passed in. The "playList" is still passed in on the last line.

The new code issues all seem to be on one line:
        :point_down: instead of "=", this should be "+="
listHTML = '<ll>' + songs[i][0] + ' by ' + songs[i][1] + '</l1>;
            :point_up: "ll" is not an HTML tag, but "li" is a list item       :point_up: same here

Hui Zheng
Hui Zheng
Pro Student 1,380 Points

Got it. Thanks professor. So 'songs' is just the name assigned to the parameter if we didn't want to name it songs, and rather used the name of the variable 'playList' it would still work.

Steven Parker
Steven Parker
176,605 Points

It would work, but it's generally not a good idea to have variables and parameters with the same names. It can be confusing to read, and the variable is "shadowed" (not accessible) from inside the function.