Why are JSON value updates several keys deep Duplicating?

Question

SUMMARY: A write operation to a single value in a JS Object (JSON format) modifies two values. (probably a copy vs reference bug).

UPDATE: JSFiddle with basic version of bug: https://jsfiddle.net/J_withfeeling/vmhx95yL/

FULL QUESTION:

I want to prep some data client side before writing it to a server.

I create my object like so:

let number = {};
let category = {};
number = {
   "numbers":{
      "num1":0,
      "num2":0,
      "num3":0
   }
};
console.log(categories);//confirming that categories is "{"category1":true,"category2":true}"
for(let m in majorList){//initialize the JSON object
   category[m] = Object.assign({}, number);
}
data = {major};

I now have a nice JS object, constructed in a JSON format:

   {
   "category":{
      "category1":{
         "numbers":{
            "num1":0,
            "num2":0,
            "num3":0
         }
      },
      "category2":{
         "numbers":{
            "num1":0,
            "num2":0,
            "num3":0
         }
      }
   }

I'm able to console.log(data) properly at this point with no problems.

Then with some JS I want to update the "num" values. I do this right now:

//some stuff up here to figure out which "category" and "number" to increment

      console.log(cat);
      console.log(num);
      console.log(JSON.stringify(data));
      data['category'][cat]['numbers'][num] = data['category'][cat]['numbers'][num] + 1;
      console.log(JSON.stringify(data));
//the above 5 lines are executed multiple times in a loop

What I expect to print out of those console.log statements is something like this:

category1
num2
"myJSON":{
   "category":{
      "category1":{
         "numbers":{
            "num1":0,
            "num2":0,
            "num3":0
         }
      },
      "category2":{
         "numbers":{
            "num1":0,
            "num2":0,
            "num3":0
         }
      }
   }
}
"myJSON":{
   "category":{
      "category1":{
         "numbers":{
            "num1":0,
            "num2":1,
            "num3":0
         }
      },
      "category2":{
         "numbers":{
            "num1":0,
            "num2":0,
            "num3":0
         }
      }
   }
}

What actually prints out is this:

category1
num2
"myJSON":{
   "category":{
      "category1":{
         "numbers":{
            "num1":0,
            "num2":0,
            "num3":0
         }
      },
      "category2":{
         "numbers":{
            "num1":0,
            "num2":0,
            "num3":0
         }
      }
   }
}
"myJSON":{
   "category":{
      "category1":{
         "numbers":{
            "num1":0,
            "num2":1,
            "num3":0
         }
      },
      "category2":{
         "numbers":{
            "num1":0,
            "num2":1,
            "num3":0
         }
      }
   }
}

The "num2" value is getting incremented in both of the "category" keys, in just a single pass of the innermost for loop. Why?

Admittingly above this code snippet there is a little more going on, but it's a bit much to include in a stackoverflow question. What is definitely the case is those 4 console.logs() with the one line of code in between. Those 5 lines are copied as-is, and I don't understand how one write operation can edit multiple values in the JSON object.

Answer 1

When you do category[m] = {score}; you are creating a new object with a single property, which references the same object score every time. So when you update one of the score values, you update them all since they all refer to the same object.

You could do category = { score: {...score} } instead, that will create a new object.

Answer 2

So, with @charlietfl pointing the way, I came up with a fix (if inelegant).

What is happening is indeed as @charlietfl and @leftclickben suggest, the JS Object is getting created using pass-by-reference, so multiple parts of the object have the same reference. Thus when one value gets updated, all the other values with the same reference also get updated.

To fix this, I moved these two lines of code:

let number = {};
number = {
   "numbers":{
      "num1":0,
      "num2":0,
      "num3":0
   }
};

from just above to inside of the loop, right before

category[m] = Object.assign({}, number);

This way, the 'number' object is destroyed and recreated between loop iterations, and so we can be sure that the next time it is used to build up the 'categories' object it is definitely a different reference. This eliminates the double-write problem. I've also updated the JSFiddle in the question with the working code snippet, plus some comments to serve as an abbreviated version of this explanation.

Shout out again to @charlietfl, if you want to post a more detailed answer I'd gladly endorse that.

Related posts: Is JavaScript a pass-by-reference or pass-by-value language? (as mentioned by @jhpratt). Also found this helpful: JavaScript: How to pass object by value?