Use ES6 to increment object property without map

Question

THE ISSUE

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.

So, here is what I'm trying to do:

Create object of fruits as keys and how many times they appear. End object would look like this:

fruitsObj[fruit].name
fruitsObj[fruit].count

So for "apple":

fruitsObj.apple.name // apple
fruitsObj.apple.count // 4

But, the output I receive is:

{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

In Version 2 I tried doing existence and type checking, to no avail. I get "1" as the only value for each count:

{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

I'm not sure what I'm doing wrong here.

MY CODE

Version 1:

// 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);

Version 2:

// 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 && fruitsObj[fruit].count > 0) {
  // increment it
  fruitsObj[fruit].count++;
 } else {
  // set it to one
  fruitsObj[fruit].count = 1;
 } 
 
});

console.log(fruitsObj);

Links I Consulted

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.

• What’s happening in this code with Number objects holding properties and incrementing the number?
• How to increment a value in a JavaScript object?
• How do you get the loop counter/index using a for…in syntax in JavaScript?
• Iterate over array of objects and change one property in each object
• https://javascript.info/object
• http://www.mojavelinux.com/articles/javascript_hashes.html
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

MY QUESTIONS

1. Why is my counter not incrementing, but instead returning 'NaN'?
2. Is there some special way to declare an object property as a number before assigning a value?
3. What am I missing in my understanding to make this work? How can I increment my object count properties?

Answer 1

Initialise the fruit's object with count: 0, when it doesn't exist, and then increment the count by 1 for each fruit with the same name:

// 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) {
  // if the object lacks a [fruit] property
  if(!fruitsObj[fruit]) {
    // create a new [fruit] object, with the name and count: 0
    fruitsObj[fruit] = { 
      name: fruit,
      count: 0
    };
  }
 
  // increment the count of the [fruit] object
  fruitsObj[fruit].count++;
});

console.log(fruitsObj);

Answer 2

Why is my counter not incrementing, but instead returning 'NaN'?

Because you are trying to increment an undefined property in the first case. In line

fruitsObj[fruit].count = ++fruitsObj[fruit].count;

fruitsObj[fruit].count is undefined, because you never assigned any number value to it. This problem you corrected in second code block.

What am I missing in my understanding to make this work? How can I increment my object count properties?

The problem with second code is this line

// Create each named-fruit property in object as a sub-object.
    fruitsObj[fruit] = {};

You are assigning a new object in every iteration. So even if this fruit is coming the second time, the new object overrides previous value when you assign a new object. You can eliminate this by checking if this object already exist or not like this

// 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 a fruit object only if it does not exist already.
        if (!fruitsObj[fruit]) {
        fruitsObj[fruit] = {};
        }
     
     fruitsObj[fruit].name = fruit;
    
     // if fruit count exists and is greater than zero
     if (fruitsObj[fruit].count != undefined && fruitsObj[fruit].count > 0) 
        {
      // increment it
      fruitsObj[fruit].count++;
     } else {
      // set it to one
      fruitsObj[fruit].count = 1;
     } 
     
    });
    
    console.log(fruitsObj);

Answer 3

In your forEach loop, try only these two lines:

if(fruitObj[fruit]) fruitObj[fruit].count+=1;
else fruitObj[fruit] = {name: fruit, count: 1};

This is instantiating or incrementing, depending on previous instantiation. You cannot increment an uninstatiated value, and in your second version you are instantiating new empty object every time (unconditionally).