Trouble with ES6 - Create Strings using Template Literals

[Liamsy02]

So, I am having a bit of trouble completing this assignment. I have met 3/4 of the requirements, with the only unpassed requirement being “failuresList should be equal to the specified output.” The problem is, I can’t figure out how to get them to match. The output of my code is:

[ '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>' ]

Meanwhile, the required output is:

[
  '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>'
]

I can’t tell the difference between these two arrays. It’s probably something really silly that I’m missing. Can anybody see my mistake here?

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

return failureItems;
};

const failuresList = makeList(result.failure);
console.log(failuresList);

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.81 Safari/537.36 Edg/104.0.1293.47

Challenge: ES6 - Create Strings using Template Literals

Link to the challenge:

freeCodeCamp.org

[sandeep5]

@Liamsy02

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

this should be

failureItems[i] = `<li class="text-warning">${arr[i]}</li>`

Initialise the failureItems back to an empty array because your solution is changing the array being passed in the function

[kevinSmith]

I see two issues.

const failureItems = arr;

What do you think that is doing? Do you think it is copying the array? It is not, it is copying the reference (memory address) of the array. If I have my house address written down on a piece of paper, and I copy that piece of paper, there is still only one house. It’s just that those two pieces of paper “point” to the same house. Similarly, these two variable now point to the same array in memory. This is often a hard concept for learners to wrap their heads around, very common. Copying primitive types is easy. Copying reference types (objects, arrays, functions, etc.) can get a little tricky.

Then you do this:

failureItems[i] = ...

Now, you are not just changing that one array, you are changing both. That is bad practice - you usually don’t want to change your parameters.

But that is probably not what is causing it to fail.

The instructions say:

Use an iterator method (any kind of loop) …

Perhaps the word “loop” is throwing you off there, but they are clearly asking for a method there. If I rewrite this using one of the array methods (which are really just disguised loops) then it passes for me.

There are a couple of different choices, but there is one array method that specifically makes and returns a new array where each element is based on the corresponding element from the original array.