ES6 - Create Strings using Template Literals

JavaScript
#1

Tell us what’s happening:
Describe your issue in detail here.

Hi! I have a question on the remaining code answer and how it does not process and log all values in the array… I’ll explain my question a little in how I’ve understood this problem. Please help me make the leap to understand how and why this array/function works the way that it does.

In the first section, we’re given a constant called result, and inside of it there are three objects, success/failure/skipped, each with an array there of comments in strings"". I’m good there.

function makeList (arr) is a function we made, and it’s going to run an array through it as the argument, and that makes sense, too.

const failureItems was declared so we could create a const variable/value to have returned to us at the end of the function, and specifically we made it worth a blank array so that we could add values onto it over time in the function. Good there, too.

Then we made a for loop, and set three conditions: (let i = 0; i < arr.length; i++). Start with i = 0 as a counter, and as long as i is worth less than the length of items in the array (which is, in this case, 3 items), increment the i counter by +1 each time to cycle through the list. So that means that JavaScript is reading through all array items.

Now, this is where I don’t follow along and need some help.

failureItems.push(<li class="text-warning">${arr[i]}</li>);

I understand that we need to use the .push method to add items into our blank array from earlier, as was created in the failureItems constant. That’s fine…

But I’m not sure when it comes to the parenthesis.

We need to push on the end the HTML

  • list objects as taken from the array, and then the counting token/value i as it cycles through that array list…

    Except…

    If that for loop is pushing the function to examine and ‘read’ every array item, shouldn’t it also be logging everything it grabs from each object in the array? As I read this, it should be logging information from array[item 0], array [item 1] and array [item 2].

    That would be grabbing the information from array/result, then going down the line from success, to failure, to skipped, and then logging… one of each of the list values? Like taking success, and then taking ‘max-length’ from that? I’m really lost here, I’m not sure how to reason this part out.

    Any and all help appreciated. Thank you all so much!!

    –lindyscodes

      **Your code so far**

    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) {
"use strict";
// change code below this line
const failureItems = [];
for (let i = 0; i < arr.length; i++) {
  failureItems.push(`<li class="text-warning">${arr[i]}</li>`);
}
// change code above this line
return failureItems;
}

const failuresList = makeList(result.failure);

      **Your browser information:**

    User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

    Challenge: ES6 - Create Strings using Template Literals

    Link to the challenge:

    • #2

    See parameters with which function is called:

    It’s looping through result.failure.

    Try to console.log(result.failure) and I think you will understand all this.

    And more stuff you can do:

    call function like this:

    const failuresList = makeList(result);
console.log(failuresList)
    #3

    I was thinking that! Thanks for clarifying. I followed up to test what I still wasn’t getting with if the array was working on ‘reading’ the entire array or just the failure items. So I tried this, inspired by your answer:

    const failuresList = makeList(result.success);

    console.log(failuresList);

    With that core function working again…

    failureItems.push(<li class="text-warning">${arr[i]}</li>);

    And I did get:

    ‘

  • max-length
    • ’,
    ‘
  • no-amd
    • ’,
    ‘
  • prefer-arrow-functions
    • ’ ]

    So I see it now, thank you again. What’s most important here is after the entire function is made, then to call on the function with the specific parameters that will define how that array[index] value will get reported back/what the function passes through and reports back on.

    Thanks again!