ES6: Create Strings using Template Literals, Understanding the code

JavaScript
1

Tell us what’s happening:
I had difficulties to complete this challenge, so I searched for help topics & I got this code.
There are a few things I didn’t understand from the code

  1. The => doesn’t look familiar, because the arrow code that I know has either () before, Is it not a arrow function if it’s not, what does it signify.
  2. Map is not in the freeCodeCamp curriculum, but I searched about it on the internet & found out that it creates a new array by manipulating the existing array without changing it.
    But here it looks very complicated because the array it is referring to is a parameter of a function, so I don’t understand what it does.

Can someone please help me understand this code?

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";

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

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/84.0.4147.135 Safari/537.36.

Challenge: Create Strings using Template Literals

Link to the challenge:

2

Well the => is actually very simple.

You could write like:

arr.map((val) => ``)
or
arr.map(val => ``)
3
  1. If you mean the map callback function, then it is an arrow function. If it only takes one parameter you can leave off the parentheses and if it’s just one line you don’t need an explicit function body and you get an implicit return as well.

This challenge is on the map method

And here is the MDN docs

  1. It is mapping the failure array from the result object and returning a new array of strings back again with the strings from the failure array added.
const arr = ["no-var", "var-on-top", "linebreak"].map(val => `<li class="text-warning">${val}</li>`);
console.log(arr)
// ["<li class="text-warning">no-var</li>", "<li class="text-warning">var-on-top</li>", "<li class="text-warning">linebreak</li>"]
4

‘=>’ is part of the Arrow function syntax. The main benefit is that the syntax is shorter than the conventional function(). Example:
function (val){return val};
Can be expressed in arrow function syntax like this:
val=>val or (val)=>val
-You can omit the parenthesis if your function is only taking only one argument, otherwise you have to put these when taking more arguments.
-As long as you intend to return something directly, as these functions do with val, you can even omit {} and return key.
However, It does not have its own this , arguments , super , or new.target

makeList is called with result.failure as argument, which in turn contains this array:

["no-var", "var-on-top", "linebreak"]

The output of resultDisplayArray has to be similar to this:

<li class="text-warning">no var</li>
<li class="text-warning">bar-on-top</li>
<li class="text-warning">linebreak</li>
5

Thank you for your reply.
But for creating a function with arrow =>, Do we not need to defined the variable like let =arr2 = (val=>``) ?

6

that’s if you are storing the function in a variable

let func = val => /* logic */

const resultDisplayArray = arr.map(func)

you can just put val => /* logic */ as argument if you don’t need to use it again