how to use variable in function outside-CodePudding

I have a problem while making code as a function.

this is my original code which is run well.

    var list = '<ul>';
    var o = 0;

    while (o < files.length) {
        list = list   `<li><a href='/?id=${files[o]}'>${files[o]}</a></li>`;
        o  ;
    }
    list = list   '</ul>';
    console.log(list);

and this is the function I made that doesn't work well.

function makeList(){
    var list = '<ul>';
    var o = 0;

    while (o < files.length) {
        list = list   `<li><a href='/?id=${files[o]}'>${files[o]}</a></li>`;
        o  ;
    }
    list = list   '</ul>';
    return;
}

makeList();
console.log(list);

CodePudding user response：

It does not work because list is not defined in the scope you are trying to use it.

Also, you should not use while for iterating. Instead you should use a for loop (for .. of works really well):

for(let file of files){
  //do something with file
}

CodePudding user response：

The easiest thing you can do is hoist the list variable up top, outside of the function.

The problem with this is that the function will always update list, instead of creating a new string.

const files = ['a', 'b', 'c'];

let list; // globally available

function makeList() {
  let o = 0;
  list = '<ul>';
  while (o < files.length) {
    list = list   `<li><a href='/?id=${files[o]}'>${files[o]}</a></li>`;
    o  ;
  }
  list = list   '</ul>';
}

makeList();
console.log(list);

You can simply this and make the function more reusable by:

Passing in the files
Using a for-loop
Short-hand append (string concatenation)
Returning the internal string

function makeList(files) {
  let list = '<ul>';
  for (let i = 0; i < files.length; i  ) {
    list  = `<li><a href='/?id=${files[i]}'>${files[i]}</a></li>`;
  }
  return list   '</ul>';
}

const list = makeList(['a', 'b', 'c']);
console.log(list);

This can be further-reduced into a mapping (nesting template strings):

const makeList = (files) => `
  <ul>
    ${files
      .map(file => `<li><a href='/?id=${file}'>${file}</a></li>`)
      .join('')}
  </ul>
`;

const list = makeList(['a', 'b', 'c']);
console.log(list);

CodePudding user response：

function makeList(){
    var list = '<ul>';
    var o = 0;

    while (o < files.length) {
        list = list   `<li><a href='/?id=${files[o]}'>${files[o]}</a></li>`;
        o  ;
    }
    list = list   '</ul>';
    return list;
}

const list = makeList();
console.log(list);

CodePudding user response：

You're close, but just a little off at the end

  makeList() {
    const clothing = ['shoes', 'shirts', 'socks', 'sweaters'];

    let list = '<ul>';
    let o = 0;

    while (o < clothing.length) {
      list = list   `<li><a href='/?id=${clothing[o]}'>${clothing[o]}</a></li>`;
      o  ;
    }
    list = list   '</ul>';

    return list;
  }

  console.log(makeList());

The variable 'list' is only scoped for the function that it's in. So when you were trying to console.log it, it didn't exist.

Also, the function had a return at the end, but you didn't say what to return...

Finally, you're on the right track, but you might want to use .forEach or something similar - Loop through an array in JavaScript

  makeList() {
    const clothing = ['shoes', 'shirts', 'socks', 'sweaters'];
    let list = '<ul>';
    clothing.forEach((item, index) => {
      console.log(item, index);
      list = list   `<li><a href='/?id=${clothing[item]}'>${clothing[item]}</a></li>`;
    });
    list = list   '</ul>';

    return list;
  }

  console.log(makeList());