Renato Mauro

Claudio Esperança

I’d expect ...fruits.map(li) to also work, but it results in 3 lemons. I must be missing something.

BTW, great notebook!

Martien van Steenbergen

When I was testing, I had the same idea and made the same mistake. The problem is that the native map function passes as arguments the element of the array, its index, and the entire array again as the 3rd parameter. In this case, li receives 3 arguments. As I insert everything that is passed , it inserts the element, its index, and flattens the array again. That's why elements repeat. Thank you for your time!

I updated the code after your comment. I have a recursive function to flatten all arguments passed to the tag factory. My code was wrong, because if I passed more than one text, only the last one was used, as I was replacing the entire innerHTML. The old code was element.innerHTML=e;. element.append (document.createTextNode (e)); is the new one. Please try again... fruits.map(li) and you will see strings, indices, and the entire array repeated for each line. Thank you again.

Hmmm… ...fruits.map(li) now shows
• apple0appleorangelemon
• orange1appleorangelemon
• lemon2appleorangelemon

Exact! It's the correct behavior (although strange). Because Map passes to callback  as argument ('apple', 0, ['apple', 'orange', 'lemon'] ) for the first element, ('orange', 1, ['apple', 'orange', 'lemon'] ) for the second, and ('lemon', 1, ['apple', 'orange', 'lemon'] ) for the last. If you pass an array to the li function, the array is "flattened". It is equivalent to passing ('apple', 0, 'apple', 'orange', 'lemon'). As arguments are not DOM Elements, one text node is created for each one. That's why I must use an arrow function to select just the first argument passed by array map.