Why is this loop using function parameter returning only once?

Question

const alphabets= {
  first: ["a", "b", "c"],
  second: ["d", "e", "f"],
  third: ["g", "h"]
};    

function trial(arr) {

  for (let i = 0; i < arr.length; i++) {
    const argh = `<li class = "text-warning">${i}<li>`;
    return argh;
  }
};

console.log(trial(alphabets.second));

I've tried the same 'for loop' outside the function replacing condition with a number and it works fine. Why is it only looping once when put in the function and using the parameter in the condition?

Answer 1

return

The return statement ends function execution and specifies a value to be returned to the function caller.

You can declare the variable outside the for loop and concatenate the htmlString in each iteration and return the variable after the loop completion.

const alphabets= {
  first: ["a", "b", "c"],
  second: ["d", "e", "f"],
  third: ["g", "h"]
};    

function trial(arr) {
  let argh='';
  for (let i = 0; i < arr.length; i++) {
    argh += `<li class = "text-warning">${i}<li>`;
  }
  return argh;
};

console.log(trial(alphabets.second));