Challenge Guide: Create Strings using Template Literals

Good morning everyone!

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);
4 Likes

ok so the function named makesList has a parameter arr. When the function is called, the argument passed is result. failure. what is result.failure?

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};

its this array below, try console.log(result.failure)

["no-var", "var-on-top", "linebreak"]

so in the for loop, you are looping over arr which is actually result.failure. Therefore
in the template literal, when you write

${arr[i]} for each iteration this will be one of the elements in arr ie one of the elements in result. failure, ie one of the elements in

["no-var", "var-on-top", "linebreak"]

make sense?

9 Likes

the function is called with result.failure as argument

1 Like

Thank you very much! I see now what was missing in my line of thought, the const failuresList = makeList(result.failure).

Reading your explanation made the click! Thank you very much!

@egglearn where does argument arr defined to equal result.failure?

@egglearn Where does argument arr defined to equal result.failure?

How? can you please explain me in detail, I’m really depressing. How does that argument arr knows result.failure? In which step it’s defined to equal?

this last line is where the function is called, and it has result.failure as argument, so when the function execute that is the value that arr takes

1 Like

please what does this code mean:

for (let i = 0; i < arr.length; i++)

That is a for loop using values of i from 0 to the length of the array arr.

1 Like

I did it slightly differently:

  const failureItems = [];
  let i = failureItems.length;
  for (i = 0; i < 3; i++) {
    failureItems.push(`<li class="text-warning">${result.failure[i]}</li>`)
    }
1 Like

Hi @xxh !

Welcome to the forum!

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.

1 Like

Hi @jwilkins.oboe !

The code in the 1st post also contains the full working solution. The OP posted the code because their initial question was about how/why it works.

Might want to put a spoiler alert on that as well?

I just added the spoiler tags:grinning:

1 Like

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.

2 Likes

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 :grinning: ).
Thanks again for challenging what I wrote earlier!

1 Like

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);
1 Like

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>`);
}
1 Like

Hi everyone, this is my first post.
my code looks similar but doesnt work and I don´t know why.

  for (let i=0; i<arr.length; i++){
    failureItems.push(`<li class="text-warning"> ${arr[i]} </li>`);
  }

If log in the console the output:
[ ‘

  • no-var
  • ’,
  • var-on-top
  • ’,
  • linebreak
  • ’ ]

    I´m failing because

    failuresList should be equal to the specified output.