Looping Code: filling in a guest list

MDN Learn
#1

I’m working on Active learning: Filling in a guest list in the JavaScript building blocks > Looping Code tutorial: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#active_learning_filling_in_a_guest_list.

I have questions regarding some half-written code I’m working on. It’s not working, and I’d love some feedback on the specific reasons why.

I looked at someone else’s answer, and they used a completely different solution–a for loop instead of a for…of loop.

  1. So my first question is: is a for…of loop just the wrong tool for this task? With the follow up, what are some types of tasks a for…of loop would be good for?
  2. I don’t think I’m doing the if statement correctly. I think I can’t say “if (people[4])” (see below). I think I have to do something to people[4] or define it or something. I’m trying to say, “when looping through the array, if you’ve landed on the 4th entry, please do this thing.” I’ve changed it to read “(if people[4] === true)”, but this doesn’t provide satisfactory results either.

Here is my code so far:
const people = [‘Chris’, ‘Anne’, ‘Colin’, ‘Terri’, ‘Phil’, ‘Lola’, ‘Sam’, ‘Kay’, ‘Bruce’];

const admitted = document.querySelector(’.admitted’);
const refused = document.querySelector(’.refused’);
admitted.textContent = 'Admit: ';
refused.textContent = 'Refuse: ';

for (person of people) {
if (people[4]){
refused.textContent +=${people[4]}, ;
}
else if (people[5]){
refused.textContent +=${people[5]};
}
else{
admitted.textContent += ${person}, ;
}
}

Any responses are appreciated! I’m not exactly looking for the right answer–I plan to work on trying again with a for loop. I’m specifically looking for thoughts on why what I wrote above doesn’t work, and how to express what I’m trying to do correctly.

#2

Hi @molly.rogers and welcome to the community :wave:

No, it’s not wrong. I would even say it’s the simpler solution for this task. Generally, I use for..of loops when I don’t need the index of the current loop item. Also remember that it’s good practice to define the loop variable as const: for (const person of people).

This won’t work because people[4] is a non-empty string which is always true. So basically what you’re doing is testing true every loop since people[4] resolves to “Phil” (in every run of the loop).
In your loop the variable person gets every name one after the other. In the first run it’s “Chris”, in the second run it’s “Anne” and so on. So you’re task is to compare person to the actual names that need to go on the “refused” list.

Does that make it clearer? Please tell me if you need some more help.
You can do it! :slightly_smiling_face:

Have a nice weekend,
Michael

#3

Hello Michael,

Thank you so much for your explanation. I was able to create both a working for loop and a working for…of loop!
I won’t copy my code here for future readers of the thread since the for…of loop ended up directly resembling the solution in the tutorial.

I so appreciate your help.

1 Like
#4

I’m glad you could work it out.
Feel free to come back whenever you need more help or if you want us to look at some of your solutions.