Create Strings using Template Literalsss

JavaScript
1

I’m not going to lie, I copied and pasted this answer from the hints section. Where did the ‘item’ bit come from?

Your code so far


const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
  "use strict";

  // change code below this line
  const resultDisplayArray = arr.map(item => `<li class="text-warning">${item}</li>`);
  // change code above this line

  return resultDisplayArray;
}
/**
 * makeList(result.failure) should return:
 * [ `<li class="text-warning">no-var</li>`,
 *   `<li class="text-warning">var-on-top</li>`, 
 *   `<li class="text-warning">linebreak</li>` ]
 **/
const resultDisplayArray = 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/75.0.3770.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals

2

I assume that’s the line you’re asking about. Let’s expand that to a more ‘traditional’ format, see if it might make a little more sense:

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

Or, to expand it even a little further:

const generateLIElement = function(item){ 
  return `<li class="text-warning">${item}</li>`;
}

// We'll use the function we just create, which takes some text, use that as our 
//   mapping function
const resultDisplayArray = arr.map(generateLIElement);

Basically, inside the map, item is a variable we create that references each item of arr in turn.

3

Hello!

If you mean the ‘item’ in the arrow function, that’s just an arbitrary variable name for that function to give each ‘item’ (hence why many people use the actual word ‘item’) that it maps through. You can use most anything you want.

1 Like