title: Using JavaScript Reduce to generate an object
body: <p>I have an array of numbers <code>[22, 44, 12, 9, 4, 23, 1, 11, 10, 5, 2, 123]</code>, I need to use reduce to create an object that looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{  
     numbersLessThanTen: [...],  
     numbersGreaterThanTen: [...]
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have the solution, which is the below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const listOfNumbers = [22, 44, 12, 9, 4, 23, 1, 11, 10, 5, 2, 123];
  
  
  const groupedBySize = listOfNumbers.reduce((total, next) =&gt; {
    const less = total.numbersLessThanTen || [];
    const more = total.numbersGreaterThanTen || [];
    
    next &gt; 10 ? total.numbersGreaterThanTen = [].concat(more, next) : total.numbersLessThanTen = [].concat(less, next);
    return total;
    
  }, {});</code></pre>
  </div>
  </div>
  </p>
  
  <p>My question is, why does the following not work? It just returns the initial value. It works when I use .push() instead of .concat() but I really want to understand why this way does not work. Thank you!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const groupedBySize = listOfNumbers.reduce((total, next) =&gt; {
    // const less = total.numbersLessThanTen || [];
    // const more = total.numbersGreaterThanTen || [];
    
    next &gt; 10 ? total.numbersGreaterThanTen.concat(next) : total.numbersLessThanTen.concat(next);
    return total;
  
  }, {numbersGreaterThanTen: [], numbersLessThanTen:[]});</code></pre>
  </div>
  </div>
  </p>