title: Javascript: Change the value of an element in an array without mutating the array
body: <p>Let's say I have an array in the form:</p>
  
  <pre><code>const array = [{id: 1, title: "this"}, {id: 2, title: "that"}];
  </code></pre>
  
  <p>I would like to change the value of one element in a given object. So that, for example, my output is like so:</p>
  
  <blockquote>
    <p>[{id: 1, title: "this"}, {id: 2, title: "foo foo foo"}];</p>
  </blockquote>
  
  <p>I'm passing an object with two properties to my function. The first property is the <strong>id</strong> of the object I'd like to modify, and the second property is the <strong>new title</strong>:</p>
  
  <pre><code>[2, "foo foo foo"]
  </code></pre>
  
  <p>I'm able to find the index of the correct object using the following code:</p>
  
  <pre><code>index = array.findIndex(item =&gt; item.id === arr[0]);
  </code></pre>
  
  <p>But I can't figure out how to change the element and replace it with my new title (arr[1]).</p>
  
  <p>I would like to change the title element in the second object <strong><em>without mutating the array</em></strong>. Any advice is greatly appreciated.</p>
  
  <p>EDIT: Sorry for the confusion regarding "without mutating the array". What I meant was I don't want the returned array to be simply a mutation of the original array, but rather a new array. Maybe "without mutating the <em>state</em>" would have been a better choice of words.</p>
  
  <p>For example, if I were to return the an array like so:
      <strong>return [...state]</strong>
  That would give me a new array (albeit with no changes) without mutating the original array. </p>