title: Avoiding object mutation
body: <p>I am working with React and ES6. So I arrivied to the following case: I have an state with an array of objects suppose <code>a = [{id: 1, value: 1}, {id: 2, value: 2}]</code> in the state of <code>Object A</code>, then I pass the list to <code>Object B</code> by props, <code>Object B</code> (in the constructor) copy the list to its own state and call a function which is using <code>map</code> function where I return <code>b = [{id: 1, value: 1, text: 'foo'}, {id: 2, value: 2, text: 'foo'}]</code> (added <code>(text, value)</code> to each object), so it though it was not mutating <code>a</code> in <code>Object A</code> but it was.</p>
  
  <p>So I made some tests:</p>
  
  <pre><code>const a = [{id: 1, value: 1}, {id: 2, value: 2}] // suppose it is in object A
  
  addText = (list) =&gt; {
      return list.map((item) =&gt; {item.text = "foo"; return item})
  }
  
  const b = addText(a) // suppose it is in object B
  </code></pre>
  
  <p>so under my assumption <code>a !== b</code>, but <code>a</code> was mutated by <code>addText</code>, so they were equal.</p>
  
  <p>In a large scale project programmers make mistakes (I did here!) how it is supposed to be handled this kind of situations to avoid mutating objects in this way? (The example tries to represet <code>a</code> as an <code>state</code> for <code>Object A</code> which is a component from React)</p>