Template Literals example: For loops

template-literals-3-for-loops.js

/* 
  Template literals for-loop example
  Using `Array(5).join(0).split(0)`, we create an empty array 
  with 5 items which we can iterate through using `.map()`
*/

var element = document.createElement('div')
element.innerHTML = `
  <h1>This element is looping</h1>
  ${Array(5).join(0).split(0).map((item, i) => `
    <div>I am item number ${i}.</div>
  `).join('')}
`
/*
  Results:
    <div>
      <h1>This element is looping</h1>
      <div>I am item number 0.</div>
      <div>I am item number 1.</div>
      <div>I am item number 2.</div>
      <div>I am item number 3.</div>
      <div>I am item number 4.</div>
    </div>
*/

@bacloud23

When you use Map, you like it because it looks cool and code is shorter. But it is not it's purpose and any other developer would not like it.

Except, you know, the entire React community 👀