Template literals to create array

JavaScript
1

Tell us what’s happening:
In Solution 1 provided, how is the function accessing the result object if failuresList is not defined until the last line of code?

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 = [];
// 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/87.0.4280.88 Safari/537.36.

Challenge: Create Strings using Template Literals

Link to the challenge:

2

when a function is called an argument is passed in, and that is the value that in this case arr takes

3

@jarcantor this function only accesses the “result” object at “failure” when it gets called with “result.failure” as an argument. In this case that call to the function doesn’t happen until the last line. I’m assuming there’s another line we can’t see that calls the “failuresList” variable which is referencing the call to makeList function with (result.failure) as an argument. If we didn’t use the “failuresList” variable. We could make the function access the list by writing the statement: makeList(result.failure); This will automatically turn the function on so to speak.

4

The full solution and expected output are below. I still don’t understand how ${arr[i]} is accessing the “result” object during “function makeList” if “failuresList” isn’t defined until the last line. Is it because function “makeList” doesn’t produce anything until it is actually called in the last line? If so, what is return failureItems; doing?

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

const failuresList = makeList(result.failure);

Expected output:

[
  '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>'
]
5

When makeList is called it gets passed the failure array.

makeList(result.failure);

So inside the function, you have access to it.

function makeList(arr) {
  console.log(arr) // ["no-var", "var-on-top", "linebreak"]
}
1 Like