title: 24-hour dropdown menu using Array.from( Array(n) ).map(String)
body: <p>trying to get better at making my code less dense but I'm stumped on this one. what's the best way to use a dropdown menu to choose between options 1-24, while the array is nested within an object? </p>
  
  <p>I am trying to make a chrome extension to create notifications for different time functions from the local time (ie 1hr, 3hrs, 12hrs, etc)</p>
  
  <p>I know it works with this array here:</p>
  
  <pre><code>var d = new Dropdown({
    id: 'd',
    val: 'custom:',
    data: ['1 hour', '2 hours', '3 hours', '4 hours', '5 hours', '6 hours', '7 hours', '8 hours', '9 hours', '10 hours', '11 hours', '12 hours', '13 hours', '14 hours', '15 hours', '16 hours', '17 hours', '18 hours', '19 hours', '20 hours', '21 hours', '22 hours', '23 hours', '24 hours'],
    cb: function cb(newval) {
      alert(newval);
    }
  });
  </code></pre>
  
  <p>for the future, to avoid the rewriting of 24 separate options would this logic work? it returns the items as an array of strings with the values being updated as the first parameter, but I am not sure if it's bad practice. </p>
  
  <pre><code>let h = Array.from(Array(24).toString(),
  (_hour, index) =&gt; `${[index + 2]} hours`).map(String);
  
  const itr = h.values(); 
  console.log(Array.isArray(h)); // outputs true
  console.log(itr); // outputs {[Iterator]}
  
  // here's where I get lost
  </code></pre>
  
  <p>if there's an easier way that I'm just missing please let me know. I prefer this to the html input, since I am not messing with dates in the timer, just logging the local time +n.</p>