Javascript sort array by length instability

You have to sort pairs (element, index) instead of actual elements. This way you'll have stable sort.

arr.map(function(str, i){
    return {
        index: i,
        length: str.length,
        value: str
    }
}).sort(function(a, b){
    return b.length - a.length || a.index - b.index;
}).map(function(obj){
    return obj.value;
})

This may seem like to much overhead, but as soon as you have to somehow compute the value you are sorting on, it's faster to compute it once and store it to some Object, than computing it potentially in a n*(n-1) operation.

So this approach in sorting is often the more performant one.

Or you generallize the two mapping-tasks:

var valueIndex = function(value,index){ return {value:value,index:index} };
var getValue = function(obj){ return obj.value };

arr.map(valueIndex)
    .sort(function(a, b){ 
        return b.value.length - a.value.length || a.index - b.index
    })
    .map(getValue);

ES6

var valueIndex = (value,index) => { return {value,index} };
var getValue = ({value}) => value;

arr.map(valueIndex)
    .sort((a, b) => b.value.length - a.value.length || a.index - b.index)
    .map(getValue);

You could use sorting with map, where the map contains the length and the index of original sorting.

// the array to be sorted
var stringArray = ['Tom', 'Mia', 'Michael', 'Bob', 'Thomas', 'Joy'];

// temporary array holds objects with position and sort-value
var mapped = stringArray.map(function (el, i) {
    return { index: i, value: el.length };
});

// sorting the mapped array containing the reduced values
mapped.sort(function (a, b) {
    return b.value - a.value || a.index - b.index;
});

// container for the resulting order
var result = mapped.map(function (el) {
    return stringArray[el.index];
});

console.log(result);