title: Using array.reduce method to count duplicate elements
body: <p>I'm working through a tutorial on functional JS and I'm up to a challenge requiring the use of the reduce method:</p>
  <p>Given a random array of words, output an array that shows the word plus it's word count, for instance: <code>['apple', 'orange', 'grape', 'apple']</code> -&gt; <code>['apple: 2', 'orange: 1', 'grape: 1']</code></p>
  <p>I know this isn't the correct use of reduce, but here was my semi-working solution:</p>
  <pre><code>var wordCountsArray = inputWords.map(function(item) {
      var counter = 0;
      var itemCount = inputWords.reduce(function(prevVal, curVal) {
          if (curVal == item) {
              counter++;
          }
          return;
      }, 0);
  
      return item + &quot;: &quot; + counter;
  })
  
  console.log(wordCountsArray);  
  </code></pre>
  <p>This did indeed output the word counts, but the word count list has duplicates, i.e. looks like:</p>
  <pre><code>['apple: 2', 'orange: 1', 'grape: 1', 'apple: 2']
  </code></pre>
  <p>instead of</p>
  <pre><code>['apple: 2', 'orange: 1', 'grape: 1']
  </code></pre>
  <p>I've looked up MSDN's guide on the method, Mozilla's, several blogs. I get how it works as an accumulator, but because it uses the output of the last iteration as input for the next, I have no idea how to apply it to this task. I don't need a solution, but maybe a little help in understanding?</p>