Create Strings Using Template Literals?

JavaScript
#1

Tell us what’s happening:
My solution is below. This should work but FCC is saying that “resultDisplayArray is the desired output.” I am returning resultDisplayArray… what’s happening here?

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(el => {`<li class="text-warning">${el}</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 (X11; Linux x86_64; rv:70.0) Gecko/20100101 Firefox/70.0.

Challenge: Create Strings using Template Literals

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

#2

if you use the { graph brackets there is no implicit return. the callback is not returning anything. if you want to use implicit return it is el => valué, or you need to use the return keyword

#3

Your resultDisplayArray does not contain the correct value. With a fat arrow function you can omit the return statement if you don’t provide a function block. However, if you use curly braces ({}) then their contents will be evaluated as a function and a return statement needs to be explicit. Your map callback function doesn’t return a value, so you just have an array of undefined.

#4

I thought {} were required in arrow functions to denote the body of the function though…

#5

But then that function needs a return statement.

#6

Hmmm that’s interesting. It works without the curly braces. Why do arrow functions work that way? When would I want to use curly braces in an arrow function (thus requiring an explicit return) versus no curly braces and no explicit return?

#7

for implicit return you don’t need curly braces
you can use implicit return if the only line of your function is a return statement

otherwise you need to use the curly braces for the function block, and then you need to use the return keyword to return something

#8

Oh I see. That makes sense.

So basically, if your arrow function needs more than one concise statement to… well, function then you would use curly braces and a return. But if it’s a short one-liner then the braces (and the return) are most likely unnecessary.

1 Like
#9

there is no “most likely”, it’s how it works: implicit return can be used only if your function is a oneliner. if you use curly braces to define the function block and you don’t use the return keyword your function returns undefined

#10

Gotcha - thank you very much! I am learning a lot!

The “most likely” stems from my lack of confidence at this early stage in my learning process. I’ve got a nasty case of imposter syndrome that I have to fight off constantly.

#11