-4

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);
Null301
  • 17
  • 4
  • What doesn't work? Do you get any errors? Where is "files" defined? – Phaelax z Jan 18 '23 at 19:53
  • 1
    Does this answer your question? [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) – David Jan 18 '23 at 19:54
  • 1
    Short answer... You defined the `list` variable inside of the function. So it only exists inside of the function. – David Jan 18 '23 at 19:54
  • 1
    You can `return list;` in the function and then `console.log(makeList());` – 001 Jan 18 '23 at 19:55

4 Answers4

1

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
}
Dr. Vortex
  • 505
  • 1
  • 3
  • 16
1

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);
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
0
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);
Konrad
  • 21,590
  • 4
  • 28
  • 64
0

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());
K2D2
  • 11
  • 3