[Solved] Setting Array element changes all elements with same name

Question

Regardless of readbility issues this seems to work as designed as shown in this jsbin. It would seems there is something else going on.

This is a great example of how immutability can help a great deal. Designing your code around immutable data structures can alleviate complexity and confusion with where truth is. It is unfortunate that in JavaScript (by default) objects are managed by reference not by value so immutable objects are not directly supported by the language itself. Newer versions (ECMAScript 5) support the Object.freeze but you would need a polyfill in older / dysfunctional browsers.

To manage the complexity of a deeply nested data structure it could help to encapsulate the data in a custom objects (object as defined in classic object oriented design, although in the case of JavaScript this would be a prototypical object). However, this is beyond the scope of the original question (see this blog post on prototypical object oriented design).

Accepted Answer

Regardless of readbility issues this seems to work as designed as shown in this jsbin. It would seems there is something else going on.

This is a great example of how immutability can help a great deal. Designing your code around immutable data structures can alleviate complexity and confusion with where truth is. It is unfortunate that in JavaScript (by default) objects are managed by reference not by value so immutable objects are not directly supported by the language itself. Newer versions (ECMAScript 5) support the Object.freeze but you would need a polyfill in older / dysfunctional browsers.

To manage the complexity of a deeply nested data structure it could help to encapsulate the data in a custom objects (object as defined in classic object oriented design, although in the case of JavaScript this would be a prototypical object). However, this is beyond the scope of the original question (see this blog post on prototypical object oriented design).