title: How to use map() loop in javascript
body: <p>I have a structure like this:</p>
  
  <pre><code>let MainItem = [
   {
      "Id": "1",
      "Cost": "1000"
    },
    {
      "Id": "2",
      "Cost": "5000"
    },
    {
      "Id": "3",
      "Cost": "2000"
    },
    {
      "Id": "4",
      "Cost": "3000"
    }
  ];
  </code></pre>
  
  <p>I am going to change the value of <code>Cost</code> each of the elements with <code>map()</code> loop and store it in <code>NewMainItem</code>.</p>
  
  <pre><code>let NewMainItem = MainItem.map((item, i) =&gt; {
    item.cost = item.cost + 1000
    return item
  });
  
  console.log(MainItem)
  console.log(NewMainItem)
  </code></pre>
  
  <p>The main problem is that by changing <code>Cost</code> in <code>NewMainItem</code>, the value of
   <code>Cost</code> in <code>MainItem</code> will be changed too, but I don not want to do this. By using <code>map()</code> loop why the main object (<code>MainItem</code> ) will be changed too?</p>