ES6 #15: Create Strings using Template Literals

JavaScript
1

Tell us what’s happening:

My code passes, but is significantly different from the two solutions on the challenge guide post. I’m just hoping for some constructive feedback on my implementation.

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

return failureItems;
}

const failuresList = makeList(result.failure);

  **Your browser information:**

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

Challenge: Create Strings using Template Literals

Link to the challenge:

2

All of the code are doing the same thing. They all use loops (but the last hides it in a map). The first one appends the new element, but yours places it at a specific index - in this context, they do the same thing. Which is better? Between those two, in this situation, I don’t think it really matters. Of the three, I like the map one the best, as it hides a lot of the details and is the most semantically explicit. In the “real world” that would probably be simplified to:

const makeList = arr => arr.map(item => `<li class="text-warning">${item}</li>`);

But be happy, you solved the problem. These are all doing the same thing algorithmically, they all solve the problem the same way, it’s just different implementations of the peculiarities of the language. You can learn all those little slick tricks later, the “thinking through the problem and coming up with a solution” is the most important thing you are learning right now.

1 Like
3

Do not reference global values, use always function parameters

1 Like
4

Which value is global?

5

result is global, you use it inside your function when it’s passed in here

6

I think I understand. Is this correct?

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

const failuresList = makeList(result.failure);
7

Now your function is reusable! Awesome!

1 Like
8

Yes, sorry I missed that.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.