title: Use ES6 to increment object property without map
body: <h2>THE ISSUE</h2>
  
  <p>I'm not really a beginner, but this might be a beginner question. I'm trying to increment a count property of an ES6 JavaScript object. The two most successful (as in they give me wrong info, but no error) versions of this minimal code example either return "NaN" or "1" for each fruit's count property. This seems like it should work, but apparently incrementing an numeric object property is not an intuitive concept.</p>
  
  <p>So, here is what I'm trying to do:</p>
  
  <p>Create object of fruits as keys and how many times they appear. End object would look like this:</p>
  
  <pre><code>fruitsObj[fruit].name
  fruitsObj[fruit].count
  </code></pre>
  
  <p>So for "apple":</p>
  
  <pre><code>fruitsObj.apple.name // apple
  fruitsObj.apple.count // 4
  </code></pre>
  
  <p>But, the output I receive is:</p>
  
  <pre><code>{apple: {…}, pear: {…}, banana: {…}, orange: {…}, kumquat: {…}}
  apple:{name: "apple", count: NaN}
  banana:{name: "banana", count: NaN}
  kumquat:{name: "kumquat", count: NaN}
  orange:{name: "orange", count: NaN}
  pear:{name: "pear", count: NaN}
  __proto__: Object
  </code></pre>
  
  <p>In Version 2 I tried doing existence and type checking, to no avail. I get "1" as the only value for each count:</p>
  
  <pre><code>{apple: {…}, pear: {…}, banana: {…}, orange: {…}, kumquat: {…}}
  apple:{name: "apple", count: 1}
  banana:{name: "banana", count: 1}
  kumquat:{name: "kumquat", count: 1}
  orange:{name: "orange", count: 1}
  pear:{name: "pear", count: 1}
  __proto__: Object
  </code></pre>
  
  <p>I'm not sure what I'm doing wrong here.</p>
  
  <h2>MY CODE</h2>
  
  <h3>Version 1:</h3>
  
  <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>// Declare an array of fruits
  var fruitsArr = ['apple', 'pear', 'apple', 'banana', 'orange', 'kumquat', 'orange', 'apple', 'apple', 'orange'];
  
  var fruitsObj = {};
  
  // Loop through each fruit storing name and count.
  fruitsArr.forEach(function(fruit, i) {
   
   // Create each named-fruit property in object as a sub-object.
   fruitsObj[fruit] = {};
   
   fruitsObj[fruit].name = fruit;
   
   // FAILS with NaN!
   fruitsObj[fruit].count = ++fruitsObj[fruit].count;
   
  });
  
  console.log(fruitsObj);</code></pre>
  </div>
  </div>
  </p>
  
  <h3>Version 2:</h3>
  
  <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>// Declare an array of fruits
  var fruitsArr = ['apple', 'pear', 'apple', 'banana', 'orange', 'kumquat', 'orange', 'apple', 'apple', 'orange'];
  
  var fruitsObj = {};
  
  // Loop through each fruit storing name and count.
  fruitsArr.forEach(function(fruit, i) {
   
   // Create each named-fruit property in object as a sub-object.
   fruitsObj[fruit] = {};
   
   fruitsObj[fruit].name = fruit;
  
   // if fruit count exists and is greater than zero
   if (fruitsObj[fruit].count != undefined &amp;&amp; fruitsObj[fruit].count &gt; 0) {
    // increment it
    fruitsObj[fruit].count++;
   } else {
    // set it to one
    fruitsObj[fruit].count = 1;
   } 
   
  });
  
  console.log(fruitsObj);</code></pre>
  </div>
  </div>
  </p>
  
  <h3>Links I Consulted</h3>
  
  <p>I review a bunch of posts and links that sent me down a rabbit hole. Even so, none of them clearly addressed my issue that I could tell.</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/38637003/what-s-happening-in-this-code-with-number-objects-holding-properties-and-increme">What’s happening in this code with Number objects holding properties and incrementing the number?</a></li>
  <li><a href="https://stackoverflow.com/questions/39590858/how-to-increment-a-value-in-a-javascript-object">How to increment a value in a JavaScript object?</a></li>
  <li><a href="https://stackoverflow.com/questions/10179815/how-do-you-get-the-loop-counter-index-using-a-for-in-syntax-in-javascript">How do you get the loop counter/index using a for…in syntax in JavaScript?</a></li>
  <li><a href="https://stackoverflow.com/questions/42306471/iterate-over-array-of-objects-and-change-one-property-in-each-object">Iterate over array of objects and change one property in each object</a></li>
  <li><a href="https://javascript.info/object" rel="nofollow noreferrer">https://javascript.info/object</a></li>
  <li><a href="http://www.mojavelinux.com/articles/javascript_hashes.html" rel="nofollow noreferrer">http://www.mojavelinux.com/articles/javascript_hashes.html</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map</a></li>
  </ul>
  
  <h2>MY QUESTIONS</h2>
  
  <ol>
  <li>Why is my counter not incrementing, but instead returning 'NaN'?</li>
  <li>Is there some special way to declare an object property as a number before assigning a value?</li>
  <li>What am I missing in my understanding to make this work? How can I increment my object count properties?</li>
  </ol>