title: Javascript - trying to add data to array in map immutably but receiving empty array
body: <p>I have a function where I am trying to map through an array of objects. For each item in the array I want to calculate certain averages and then pop that data into a different array. At the end of the function I want to return the array that now contains the data received during the mapping. </p>
  
  <p>Instead I'm getting returned an empty array.</p>
  
  <p>I'm trying to do so without mutating the array, so avoiding Array.push() (I will note that if I do use Array.push within my function to update my array the function works).</p>
  
  <p>Here's the function in question:</p>
  
  <pre class="lang-js prettyprint-override"><code>function getForecastAverages(forecasts) {
    const dailyForecasts = Object.values(forecasts);
    const averages = [];
    dailyForecasts.map((hourlyForecasts, idx) =&gt; {
      const high = getTempAvg(hourlyForecasts, 'high');
      const low = getTempAvg(hourlyForecasts, 'low');
      const desc = getDescriptionAvg(hourlyForecasts);
  
      return [...averages,  { date: Object.keys(forecasts)[idx], high, low, desc }];
    });
  
    return averages;
  }
  </code></pre>
  
  <p>Other functions</p>
  
  <pre class="lang-js prettyprint-override"><code>function getTempAvg(forecasts, key) {
    const avg = forecasts.reduce((acc, curr) =&gt; acc + curr[key], 0) / forecasts.length;
  
    return avg.toFixed(2);
  }
  
  function getDescriptionAvg(forecasts) {
    const length = forecasts.length;
    const descriptions = forecasts.map(forecast =&gt; forecast.description);
  
    return getMostFrequent(descriptions, length, 0);
  }
  
  function getMostFrequent(array, length, currIdx, maxCount = 0, mostFrequent = null, counts = {}) {
    if (currIdx + 1 &gt; length) return mostFrequent;
  
    // first we need the word that we are counting the frequency of in the array
    const word = array[currIdx];
  
    // check if the current word exists in our counts object. If it doesn't, add the word and its count to the object. If it is present we increase its current count by 1
    if (counts[word] === undefined) {
      counts[word] = 1;
    } else {
      counts[word] = counts[word] + 1;
    }
  
    // check if the current word has a count that is larger than the highest count in our object. If it does we want to update our max count and most frequent word
    if (counts[word] &gt; maxCount) {
      maxCount = counts[word];
      mostFrequent = word;
    }
    const newIdx = currIdx + 1;
  
    return getMostFrequent(array, length, newIdx, maxCount, mostFrequent, counts);
  }
  </code></pre>
  
  <p>Dummy data</p>
  
  <pre><code>forecasts = {
    '2019-07-25': [
      {
        date: '2019-07-25 18:00:00',
        description: 'broken clouds',
        grnd_level: 1006.19,
        high: 24.64,
        humidity: 49,
        low: 23.98,
        pressure: 1017.03,
        sea_level: 1017.03,
        temp: 24.64,
      },
      {
        date: '2019-07-25 21:00:00',
        description: 'overcast clouds',
        grnd_level: 1006.34,
        high: 22.91,
        humidity: 55,
        low: 22.41,
        pressure: 1017.16,
        sea_level: 1017.16,
        temp: 22.91,
      },
    ],
    '2019-07-26': [
      {
        date: '2019-07-26 18:00:00',
        description: 'broken clouds',
        grnd_level: 1006.19,
        high: 24.64,
        humidity: 49,
        low: 23.98,
        pressure: 1017.03,
        sea_level: 1017.03,
        temp: 24.64,
      },
      {
        date: '2019-07-26 21:00:00',
        description: 'overcast clouds',
        grnd_level: 1006.34,
        high: 22.91,
        humidity: 55,
        low: 22.41,
        pressure: 1017.16,
        sea_level: 1017.16,
        temp: 22.91,
      },
    ],
  }
  </code></pre>
  
  <p><strong>I've also tried</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>    return averages.concat({ date: Object.keys(forecasts)[idx], high, low, desc })
  </code></pre>
  
  <p>Receive error that "averages" is read-only and it cannot be changed</p>
  
  <pre class="lang-js prettyprint-override"><code>    const oldAvgs = averages
      averages = [...oldAvgs, { date: Object.keys(forecasts)[idx], high, low, desc }]
  
      return averages
  </code></pre>
  
  <p>Works but like I said, it's mutating the array</p>
  
  <pre class="lang-js prettyprint-override"><code>    return averages.push({ date: Object.keys(forecasts)[idx], high, low, desc })
  </code></pre>