const test = [3, 5, 6, 7, 8, 0, "", null, undefined, "testing"];


 test.forEach(listItem);

function listItem(item, number, total) {
    return `<li class="${number}">${item} ${number} of ${total}</li>`;
}


let htmlDOM = `<ul>${test.map((item, index, array) => listItem(item, `${index + 1}`, `${array.length}`)).join("")}</ul>`;
  

//console.log(htmlDOM);

/**

'<ul><li class="1">3 1 of 10</li><li class="2">5 2 of 10</li><li class="3">6 3 of 10</li><li class="4">7 4 of 10</li><li class="5">8 5 of 10</li><li class="6">0 6 of 10</li><li class="7"> 7 of 10</li><li class="8">null 8 of 10</li><li class="9">undefined 9 of 10</li><li class="10">testing 10 of 10</li></ul>'

*/

(function () {
  "use strict";

  const person = {
    name: "John Doe",
    age: 30,
    hobbies: ["reading", "traveling", "coding"],
  };

  const { hobbies, name, age } = person; // descructure

  hobbies.forEach((item, idx) => passInfo(item, idx, { name, age })); // pass function into the foreach

  function passInfo(item, idx, ...args) {
    console.log({ item, idx, args });
  }
})();



// another example

const test = [3, 5, 6, 7, 8, 0, "", null, undefined, "testing"];

test.forEach(listItem);


 function listItem(item, number, total) {
    return `<li class="${number}">${item} ${number} of ${total}</li>`;
  }

 function direction(item) {
    const increment =
      item.classList[1] === "decrease"
        ? counter--
        : item.classList[1] === "increase"
        ? counter++
        : item.classList[1] === "reset"
        ? (counter = 0)
        : counter; 

    return increment;
  }