title: Why does a js map on an array modify the original array?
body: <p>I'm quite confused by the behavior of map().</p>
  <p>I have an array of objects like this:</p>
  <pre><code>const products = [{
      ...,
      'productType' = 'premium',
      ...
  }, ...]
  </code></pre>
  <p>And I'm passing this array to a function that should return the same array but with all product made free:</p>
  <pre><code>[{
      ...,
      'productType' = 'free',
      ...
  }, ...]
  </code></pre>
  <p>The function is:</p>
  <pre><code>const freeProduct = function(products){
      return products.map(x =&gt; x.productType = &quot;free&quot;)
  }
  </code></pre>
  <p>Which returns the following array:</p>
  <pre><code>[&quot;free&quot;, &quot;free&quot;, ...]
  </code></pre>
  <p>So I rewrote my function to be:</p>
  <pre><code>const freeProduct = function(products){
      return products.map(x =&gt; {x.productType = &quot;free&quot;; return x})
  }
  </code></pre>
  <p>Which returns the array as intended.</p>
  <p>BUT ! And that's the moment where I loose my mind, in both cases my original products array is modified.</p>
  <p>Documentation around map() says that it shouldn't ( <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map</a> ).</p>
  <p>I even tried to create a clone of my array turning my function into this:</p>
  <pre><code>const freeProduct = function(products){
      p = products.splice()
      return p.map(x =&gt; {x.productType = &quot;free&quot;; return x})
  }
  </code></pre>
  <p>But I still get the same result (which starts to drive me crazy).</p>
  <p>I would be very thankful to anyone who can explain me what I'm doing wrong!</p>
  <p>Thank you.</p>