title: How to prevent object change after function executes?
body: <p>I have googled a lot but cannot get it...</p>
  
  <p>I have an object </p>
  
  <pre><code>var games = [
    {name: 'Pako', rating: 4.21},
    {name: 'Hill Climb Racing', rating: 3.88},
    {name: 'Angry Birds Space', rating: 3.88},
    {name: 'Badland', rating: 4.33}
  ];
  </code></pre>
  
  <p>And function which takes this object as an argument (obj_array). It is basically doing just sorting of that array and returns a sorted array, just as written in many tutorials.</p>
  
  <pre><code>function sortByAttribute(obj_array, attr) {
  ...
  
  return obj_array.sort(function(obj1, obj2) {
      if (obj1[prop[0]] == obj2[prop[0]]) {
          return (obj1[prop[1]] &lt; obj2[prop[1]] ? 1: -1)*sortOrder;
      }
      return ((obj1[prop[0]] &gt; obj2[prop[0]]) ? 1 : -1) * sortOrder;
  });
  </code></pre>
  
  <p>}</p>
  
  <p>So, then I have the following lines:</p>
  
  <pre><code>console.log(sortByAttribute(games, 'name'));
  
  console.log(games);
  
  console.log(sortByAttribute(games, ['-rating', 'name']));
  </code></pre>
  
  <p>All of them produce the same result and show the result of the last sorting. I understand, that most probably the answer is in the scope and closures, but I cannot get how I can change the code so that it shows all three outputs differently.</p>
  
  <p>PS. All this code is now located in the same file.</p>