title: Push to a new array inside a map/promise
body: <p>Here is a simplified version of my current setup. </p>
  
  <p>When running this code you'll notice that modifying the <code>changes</code> array also manipulates the original <code>referrals</code> array. Is this because I'm <code>push</code>ing to the <code>changes</code> array inside a map function? How can I modify the <code>changes</code> array without modifying the <code>referrals</code> array?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var referrals = [
    {
      id: 1,
      name: 'John',
      change: true
    },
    {
      id: 2,
      name: 'Sally',
      change: false
    },
    {
      id: 3,
      name: 'Kim',
      change: true
    }
  ];
  
  var changes = [];
  
  var process = referrals.map(function(referral) {
    return new Promise(function(resolve, reject) {
      if (referral.change) {
        changes.push(referral);
      }
      resolve();
    });
  });
  
  Promise.all(process).then(function() {
    console.log('referrals before:', referrals);
    changes = changes.map(function(change) {
      change.change_id = change.id;
      delete change.id;
      return change;
    });
  
    console.log('changes:', changes);
    console.log('referrals after:', referrals);
  });</code></pre>
  </div>
  </div>
  </p>