React: Javascript assignment not updating object

Question

Code here: https://codesandbox.io/s/github/nieroda/js_err

In function endTurn

    console.log(`GameBoard Before`)
    console.log(gameBoardCopy)

    gameBoardCopy[currentRow][4] = { numColorMatch: 2, numExactMatch: 2 }

    console.log(`GameBoard After`)
    console.log(gameBoardCopy)

See Console Output

Before:
5: Array(5)
0: "BlueViolet"
1: "BlueViolet"
2: "BlueViolet"
3: "BlueViolet"
4: {numColorMatch: 0, numExactMatch: 0}

After 

5: Array(5)
0: "BlueViolet"
1: "BlueViolet"
2: "BlueViolet"
3: "BlueViolet"
4: {numColorMatch: 0, numExactMatch: 0}

I can't figure out why it's not working?

Take a look at [this question](https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language). That might help. (I see line 1 has you assigning an object to another variable and calling that a "copy", but because assignment is "by reference" and not "by value" I don't think that does what you think it does - both the "copy" and the original are still the same object, you just gave it two different names.) — Garrett Motzner, Feb 28 '19 at 23:54
Tried making a deep copy of the object - the assignment still doesn't work @GarrettMotzner — Nate, Mar 01 '19 at 01:14
You got some crazy mutation issues going on here :). When I step through with a debugger, the result is different than when I don't have a breakpoint set. So there is also a timing issue with the console and the point at which it logs the data. That is strange. So the data is being set, it's just then later being mutated. — Garrett Motzner, Mar 01 '19 at 18:59
Alright, so you have mutation happening in many places, and one of those is the hint block, when you are iterating through the pegs, you are mutating a data structure. Even with that fixed, there is still mutation. So, to help prevent that from happening, I'd recommend using [Immutable.js](https://github.com/immutable-js/immutable-js). This gives you alternate immutable lists instead of arrays and immutable maps instead of objects, so that you can't accidentally mutate things. It is another thing to learn though... — Garrett Motzner, Mar 01 '19 at 19:48
Another thing, in order to get an accurate `console.log` in this case, I had to use `JSON.stringify` on the data structure. (although a deep copy would have worked as well. a shallow copy didn't work here, because you were mutating the deepest level). — Garrett Motzner, Mar 01 '19 at 19:51

Garrett Motzner · Answer 1 · 2019-03-01T20:26:59.110

Your data is updating, but it is getting mutated elsewhere in the code, and the console.log isn't quite immediate enough (especially with the code sandbox wrapper around console.log). So in order to get around that do one of the following:

JSON.stringify your data before passing it to console.log. This will freeze the data into a string.
Deep copy your data structure before passing to console.log. (Problem is that there is no built-in deep copy for JS)
Use a debugger and set a breakpoint after the log, either with the debugger console or with the debugger statement. (Usually debugger statements are ignored if the debugger console is hidden, so make sure that is up). This will interrupt the normal flow and force the log to flush, giving you more accurate data.

That answers your question, but not your problem, which is that you are mutating things you don't expect to. That can be solved by making sure you are first (deep) copying everything you are mutating, not using mutation (libraries like Immutable.js can help there), or using something like MobX which allows you to mutate things and then subscribe to those mutation events.

React: Javascript assignment not updating object

1 Answers1

Linked