title: Sort array items and preserve order of same elements
body: <p>Suppose I have this array:</p>
  
  <pre><code>var array = [
    { name: "border-color", value: "#CCCCCC" },
    { name: "color", value: "#FFFFFF" },
    { name: "background-color", value: "rgb(0, 0, 0)" },
    { name: "background-color", value: "rgba(0, 0, 0, .5)" }
  ];
  </code></pre>
  
  <p>And this function to sort the array by name:</p>
  
  <pre><code>array.sort(function(a, b) {
    if (a.name &lt; b.name) return -1;
    if (a.name &gt; b.name) return 1;
    return 0;
  });
  </code></pre>
  
  <p>And <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.sort" rel="noreferrer">ECMAScript language specifications that tell me that</a>:</p>
  
  <blockquote>
    <p>The sort is not necessarily stable (that is, elements that compare
    equal do not necessarily remain in their original order).</p>
  </blockquote>
  
  <p>So, after sorting, the two items with name = background color could appear in any order i.e.:</p>
  
  <pre><code>[
    { name: "background-color", value: "rgb(0, 0, 0)" },
    { name: "background-color", value: "rgba(0, 0, 0, .5)" },
    ...
  ]
  </code></pre>
  
  <p>Or</p>
  
  <pre><code>[
    { name: "background-color", value: "rgba(0, 0, 0, .5)" },
    { name: "background-color", value: "rgb(0, 0, 0)" },
    ...
  ]
  </code></pre>
  
  <p>How can I sort the array so that items with same name maintain their relative order? I would rather not hardcode anything.</p>