I am having some trouble understanding the solution to the mentioned challenge.
I had to check how to solve it but dont really understand how it was done and i do not wish to move on until I do:
My question is how does the arr push the 3 different options to the array list from the result const. I am having trouble understanding how it knows to get the text from result.failure
I understand the placeholder, just not how the i gets its value.
(my apologies if it is a dumb question but I have been around this for 2 hours and it is really bugging me)
const result = {
success: ["max-length", "no-amd", "prefer-arrow-functions"],
failure: ["no-var", "var-on-top", "linebreak"],
skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
const failureItems = [];
for (let i = 0; i < arr.length; i++)
{failureItems.push(`<li class="text-warning">${arr.[i]}</li>`);}
return failureItems;
}
const failuresList = makeList(result.failure);
const failureItems = [];
let i = failureItems.length;
for (i = 0; i < 3; i++) {
failureItems.push(`<li class="text-warning">${result.failure[i]}</li>`)
}
I have added spoiler tags around your code since it is a full working solution and we don’t want to spoil it for others that haven’t done this problem yet.
Yes, it passes the test for the specific case of result.failure. But since you hard coded a reference to that in the string literal template inside the function, it wouldn’t work for all cases (result.success and result.skipped). What would the output be for the other cases? try:
console.log(makeList(result.success);
and
console.log(makeList(result.skipped);
See what I’m saying?
Also you hard coded a number for the number of loops to perform in the conditional part of the loop.
What if the arrays were longer than 3 items long?
How could you re-write it so that it would work even if you didn’t know the length of the array being passed to the function?
And the line above the for loop, it really isn’t doing anything useful.
Not picking on you, but for learning purposes, just challenging you to think about what’s happening in your code, and why what I’ve pointed out is the case . Maybe you can fix it to address these issues.
Thanks for your post a_aramini !
I agree that hard-coding is rendering this code useless for the other two scenarios. I took a better look, and it looks like using the argument passed to makeList (both in i < arr.length; and ${arr[i]} is a much better solution. And I agree about the line above (looks like it was a leftover from what I had coded while looking for a solution). I’m not posting the result (as it will be blurred ).
Thanks again for challenging what I wrote earlier!
I used a for...in loop and got the desired output, but am not able to pass the challenge. Is there something wrong with doing it this way or is it just that this has not been added as an acceptable solution?
const result = {
success: ["max-length", "no-amd", "prefer-arrow-functions"],
failure: ["no-var", "var-on-top", "linebreak"],
skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
// Only change code below this line
const failureItems = [];
for(obj in arr) {
failureItems.push(`<li class="text-warning">${arr[obj]}</li>`);
}
// Only change code above this line
return failureItems;
}
const failuresList = makeList(result.failure);
You have to declare the obj variable in the for…in loop.
BTW, for arrays, you really should be using a for…of loop instead (forEach or map would be even better if you ask me). You can pass the challenge with just a map. The setup might make it look like you have to use the failureItems array, but you don’t.
function makeList(arr) {
return arr.map(failureText => `<li class="text-warning">${failureText}</li>`);
}
).