title: How to create an arbitrary mapping in javascript?
body: <p>I have a React app where I want to <a href="https://github.com/dhappy/clock" rel="nofollow noreferrer">display lunar phases</a>. To that end I tried to create an empty array and then <code>map</code> it appropriately:</p>
  
  <pre><code>import React from 'react'
  
  export const MoonPhase = (props) =&gt; {
    let start = new Date(props.start)
    let end = new Date(props.end)
  
    let delta = (end.getTime() - start.getTime()) / 1000
    let quarters = new Array(Math.floor(
      // Each lunar month is 2.55ᴇ6s.
      (delta / (2.55 * Math.pow(10, 6))) * 4
    ))
  
    return (
      &lt;div className='phases'&gt;
        {quarters.map((_, i) =&gt; {
          switch(i % 4) {
            case 0: return &lt;span&gt;&lt;/span&gt;
            case 1: return &lt;span&gt;&lt;/span&gt;
            case 2: return &lt;span&gt;&lt;/span&gt;
            case 3: return &lt;span&gt;&lt;/span&gt;
          }
        })}
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>This doesn't produce anything, but if I change <code>quarters</code> to <code>[1,2,3,4,5]</code> I get output.</p>
  
  <p>How should I approach this?</p>