Logic of create Strings using Template Literals

JavaScript
1

Tell us what’s happening:

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((text)=> `<li class="text-warning">${text}</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);

I don’t understand why we need to set this code const resultDisplayArray = makeList(result.failure);at the end. Also, I want to see how this code arr.map((text)=>

  • ${text}
    • ) work step by step, so I went to Developer tool try to check what is the result of result.failure. But I got this
    Capture
    so now I feel like I got confused with object again…
    Why didn’t it show the arr of result.failure?

    Your browser information:

    User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

    Link to the challenge:

    2

    I don’t know the specific developer tool (I should learn more about those…), but if I wanted to see what map was doing, I’d do this:

    const resultDisplayArray = arr.map((text)=> {
  console.log('text =', text)
  let returnStr = `<li class="text-warning">${text}</li>`
  console.log('returnString', returnString)
  return returnString
});
    2 Likes
    3

    In dev tools it will run once and then fail every time after because you are trying to re-declare the result object over and over again. Anything declared const is constant so cannot be re-declared or re-assigned.

    You can try that over again in a new tab or window but use var to declare your result object and variable resultDisplayArray.

    var result = {  // <-- change declaration to var, not const
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["id-blacklist", "no-dup-keys"]
};
    4

    Another trick is to enclose all of your code in a block:

    {
  const notGlobal = 42;
  console.log(notGlobal);
}

    const and let are block scoped, so this way you won’t pollute the global namespace and can rerun your code as many times as you like in devtools.

    2 Likes
    5

    Without enclosing in a block, only var will work (let allows you to reassign, but not redeclare, so a second let stillGlobal = 42 would still throw an error).

    6

    Correctamundo! I was wrong about let

    7

    But for the first try, I only console.logresult.failure. I didn’t re-declare the result object, did I?

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

    I am just still confused with the meaning of “re-declare”
    I think I am just accessing the object value.
    Also, I have tried change const to var
    but it didn’t work.
    triedCapture

    Am I missing something or misunderstanding something about object??
    Hope my question doesn’t sound too stupid…

    8

    You are going to need to start over using the development tools in a fresh browser or fresh browser tab.

    If you want a nice playground to test JavaScript in https://repl.it has been handy for me.

    1 Like
    9 
    const a = 'Look at me, I\'m a declaration!';
let b = 'So am I!';
var c = 'Me too!';

b = 'Not me, I\'m just an assignment.';
c = 'Same here.';

    Using any of the keywords const, let, and var declares a new variable. If the name of that variable already exists in the current scope and any of those declarations used the const or let keywords, an error will be thrown (even if the other declarations used var).

    Type of declaration Redeclare with var? Reassign (no keyword)?
    const Throws a SyntaxError Throws a TypeError
    let Throws a SyntaxError Succeeds
    var Succeeds Succeeds

    It’s also possible that the global namespace is already polluted due to code running on of the page on which you’re using devtools. Try it in a new tab, wrap everything in a block, and you should be fine.

    2 Likes
    10

    Chrome devtools has access to any variables declared in the page, and any that you type into the console yourself.

    You can clear only what you enter using console.clear(), or clicking on the circle-slash icon on the top left of the panel.

    What is running on the page will need at least a reload to clear.

    1 Like
    11

    Thank you for your explanations. They help a lot!

    1 Like
    12

    So, in this case, is it because that the first const =resultDisplayArray is in the function {}, that’s why it works fine that it re-declare at the last line outside of the function {}?

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


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

 
}
**const resultDisplayArray = makeList(result.failure);**
    13

    I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

    markdown_Forums

    14

    A function that uses braces ({}) creates a new block scope. Some other types of blocks are if blocks, for loop blocks, and plain blocks:

    function func() {
  //a function block
}

if (true) {
  //an `if` block
}

for (let i = 0; i < 10; i++) {
  //a `for` loop block
}

{
  //a plain block
}

    In your example code, the two resultDisplayArray declarations exist in different scopes; the first declaration is scoped to that function block, whereas the second is global scoped.

    Further reading: Block statement - JavaScript | MDN

    1 Like
    15

    Totally understand now. Thank you!