DOUBT-Create Strings using Template Literals

JavaScript
1

Tell us what’s happening:
I understand that the code can be used to call not only failure, but also others, by calling it at the end(like how it is done here to call failure).
But how do you give a value to the parameter of arr i.e z in this case?
Because, when I tested out this code, it showed undefined. So I’m assuming that there is some way to give a value to z.

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(z =>
   `<li class="text-warning">${z}</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 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

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

2

Okay, I’m not sure I understand your question, but I’ll give it a go. The value of arr inside makeList() is derived from the argument passed into the function via the parens.

so when, at the end it calls makeList(result.failure); what is being passed into the function as arr is the value of the failure property of the result object which is an array.

makeList() doesn’t care where the array that gets passed in comes from. All it cares is that it gets an array you could call it like this: makeList(["Smy24", "Chad Kreutzer", "Quincy Larson"]); and it would work perfectly, returning:

[ `<li class="text-warning">Smy24</li>`,
  `<li class="text-warning">Chad Kreutzer</li>`, 
  `<li class="text-warning">Quincy Larson</li>` ]
3

It works perfectly for me.
If you tested it like the code below, maybe you forgot the return?
Just guessing.

  const resultDisplayArray =arr.map(z => {
    console.log(z);
    return `<li class="text-warning">${z}</li>`;
  });
4

I thought we aren’t supposed to use return when arrow functions are used

5

You can omit the braces and the return only if you are returning a single expression. As soon as you put in those braces the return is required (if in fact you want to return something, as you do).

1 Like
6

But I don’t quite get what the role of z is in the code above

7

Yes and no. If your arrow function is just one line long and returning a value, you may omit the brackets and the return. if your arrow function is more than one line long, then you need to use the brackets and the return

8

Ah! I gotcha.

the z is part of the Array.map() function.

When you call map on an array, your are iterating through each item in the array, performing some sort of operation on that item, then replacing that item with the results of your operation in a new array.

in this case, z stands in for that item each time.

it’s kinda like

const newArr = [];
for(let i = 0; i < arr.length; i++) {
  // do something to arr[i]
  newArr[i] = //the results of what you did
}
return newArr;
9

Inside map method your callback function is called with these parameters once for each element

  1. current element
  2. index of that current element,
  3. the entire array
  4. and a value to use as “this”

You are only using the first one - current element that you have named z.
The others are available but you haven’t created variables for those because you don’t need them.

10

Okay I’ll make my doubt more clear-
Arr itself is a parameter right? then why do we need to map another parameter inside it (z) in this case?
and how do we give inputs to z?

I’m sorry if my question makes no sense. I’m still figuring things out

11

okay, parameters in functions is just a fancy name for variables being passed into the function. So you can think of it like this:

We define our function:

myFunction(str){
  console.log(str);
}

We call our function:

myFunction("Hi, Smy24!");

this is like saying myFunction(str = "Hi, Smy24!")

and under the hood, inside the function it is effectively saying;

myFunction("Hi, Smy24!" ){
  console.log("Hi, Smy24!");
}

because of that, arr inside your function takes on the value of the array that was passed in, and because of that, we can use any method on arr that we can use on an array.

Does that help?

1 Like
12

so you mean to say that in the code above, z is nothing but “Hi, Smy24” and arr is nothing but str? and by giving a value to z, that value will be equal to arr?

13

Works kind of like this…


const thisArray = ["cow", "horse", "elephant"] //original array

function myMap(callback){
    const newArray = [];

    // calls your function once for each element in array with those parameters
    for(let i = 0; i < thisArray.length; i++){
      newArray.push(callback(thisArray[i], i, thisArray));
    }

    return newArray;
}

myMap( el => `I'm so hungry I could eat a ${el}`)

// returned array
// [ 'I\'m so hungry I could eat a cow',
//   'I\'m so hungry I could eat a horse',
//   'I\'m so hungry I could eat a elephant' ]
2 Likes
14

yess got it. Thanks a lot!

1 Like
15

No. if we were to map (hur hur) my example to your code above, arr would be like “Hi, Smy24” and z would be like the characters in “Hi, Smy24” one at a time.

lets assume we make “Hi, Smy24” into an array: const hi = ["H","i",","," ","S","m","y","2","4"]

applying map to that array like this:

hi.map(function(z){
  return `${z}*`;
});

would iterate through that array and return a new one like this: `["H*","i*",",*"," *","S*","m*","y*","2*","4*"]
1 Like
16

yupp got it. Thank you so much!

1 Like