title: Group objects by multiple properties in array then sum up their values
body: <p><a href="https://codereview.stackexchange.com/questions/37028/grouping-elements-in-array-by-multiple-properties">Grouping elements in array by multiple properties</a> is the closest match to my question as it indeed groups objects by multiple keys in an array. Problem is this solution doesn't sum up the properties value then remove the duplicates, it instead nests all the duplicates in a two-dimensional arrays.</p>
  
  <p><strong>Expected behavior</strong> </p>
  
  <p>I have an array of objects which must be grouped by <code>shape</code> and <code>color</code>. </p>
  
  <pre><code>var arr = [
      {shape: 'square', color: 'red', used: 1, instances: 1},
      {shape: 'square', color: 'red', used: 2, instances: 1},
      {shape: 'circle', color: 'blue', used: 0, instances: 0},
      {shape: 'square', color: 'blue', used: 4, instances: 4},
      {shape: 'circle', color: 'red', used: 1, instances: 1},
      {shape: 'circle', color: 'red', used: 1, instances: 0},
      {shape: 'square', color: 'blue', used: 4, instances: 5},
      {shape: 'square', color: 'red', used: 2, instances: 1}
  ];
  </code></pre>
  
  <p>Objects in this array are considered duplicates only if both their <code>shape</code> and <code>color</code> are the same. If they are, I want to respectively sum up their <code>used</code> and <code>instances</code> values then delete the duplicates.</p>
  
  <p>So in this example result array may only contain four combinations : <code>square red</code>, <code>square blue</code>, <code>circle red</code>, <code>circle blue</code></p>
  
  <p><strong>Problem</strong> </p>
  
  <p>I tried a simpler approach here: </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>var arr = [
      {shape: 'square', color: 'red', used: 1, instances: 1},
      {shape: 'square', color: 'red', used: 2, instances: 1},
      {shape: 'circle', color: 'blue', used: 0, instances: 0},
      {shape: 'square', color: 'blue', used: 4, instances: 4},
      {shape: 'circle', color: 'red', used: 1, instances: 1},
      {shape: 'circle', color: 'red', used: 1, instances: 0},
      {shape: 'square', color: 'red', used: 4, instances: 4},
      {shape: 'square', color: 'red', used: 2, instances: 2}
  ];
  
  result = [];
  
  arr.forEach(function (a) {
      if ( !this[a.color] &amp;&amp; !this[a.shape] ) {
          this[a.color] = { color: a.color, shape: a.shape, used: 0, instances: 0 };
          result.push(this[a.color]);
      } 
      this[a.color].used += a.used;
      this[a.color].instances += a.instances;
  }, Object.create(null));
  
  console.log(result);</code></pre>
  </div>
  </div>
  </p>
  
  <p>but it outputs</p>
  
  <pre><code>[{shape: "square", color: "red", used: 11, instances: 9},
  {shape: "circle", color: "blue", used: 4, instances: 4}]
  </code></pre>
  
  <p>instead of expected result:</p>
  
  <pre><code>[{shape: "square", color: "red", used: 5, instances: 3},
  {shape: "circle", color: "red", used: 2, instances: 1},
  {shape: "square", color: "blue", used: 11, instances: 9},
  {shape: "circle", color: "blue", used: 0, instances: 0}]
  </code></pre>
  
  <p>How can I get my function to properly group the objects by shape and color ? i.e. sum up their values and remove the duplicates ?</p>