Using logical OR operator inside a loop to sort an array

Question

I have an array like this:

var planets_info = [
    {
    "name": "Mercury",
    "size": 120,
    "color": "gray",
  },
  {
    "name": "Earth",
    "size": 100,
    "color": "blue",
  },
  {
    "name": "Mars",
    "size": 200,
    "color": "red",
  }
];

That I am trying to sort based on name and size or color. This is defined like this:

var sorts = "size,name"; // or size, name, color dynamic value

I can do sorting like this:

planets_info = planets_info.sort( function(a, b){
        return a.size - b.size || a.color - b.color;
        //  or
        // return a.size - b.size || a.color - b.color || a.name - b.name;

        //  or
        // a.color - b.color || a.name - b.name;

});

But I dont know how to modify the sort so it sorts based on the values from var sorts - so a.size - b.size || a.color - b.color; will be dynamic based on the values from sorts - it can be based on name,size or name,size,color which will be added by || :

var sorts = "size,name";
sorts = sorts.split(',');

sorts.forEach(element=> {
    console.log("sort " + element);
});

Answer 1

You could take an array of the wanted keys for sorting and use a short circiut for comparison of the values.

const
    planets = [{ name: "Mercury", size: 120, color: "gray" }, { name: "Earth", size: 100, color: "blue" }, { name: "Mars", size: 200, color: "red" }],
    sorts = ["size", "name"];

planets.sort((a, b) => {
    let v;
    sorts.some(k => v = a[k] > b[k] || -(a[k] < b[k]));
    return v;
});

console.log(planets);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

See Dynamically access object property using variable

You can access keys using a variable by using the bracket notation:

const obj = {
  "name": "Mercury",
  "size": 120,
  "color": "gray",
};

const key = "name";

console.log(obj[key]);

Furthermore, if your string is always comma separated, you can call String#split() to convert it into keys:

const sorts = "name,size,color";

const keys = sorts.split(",");

console.log(keys);

const obj = {
  "name": "Mercury",
  "size": 120,
  "color": "gray",
};

console.log(obj[keys[0]]);
console.log(obj[keys[1]]);
console.log(obj[keys[2]]);

Before we continue, I have to point out that subtracting two values only works if you're sorting numbers, not if you're sorting strings. For example

console.log("Mars" - "Mercury");
console.log("red" - "blue");

If you want a more universal sorting, you can use the relation comparison operators < and > that works on numbers, strings, and some objects like dates. Keep in mind that you have to return three values, not just true and false. So with this in mind, it's easy to create a generic comparison function:

const compare = (a, b) => {
  if (a < b)
    return -1;
  
  if (a > b)
    return 1;
    
  return 0;
}
                                         // sort order:
console.log(compare("Mars", "Mercury")); // Mars, Mercury
console.log(compare("red", "blue"));     // blue, red
console.log(compare(120, 100));          // 100, 120

console.log(compare(                     // 7th of January, 11th of January
  new Date("2021-01-07"),
  new Date("2021-01-11")
));

Now with this, alongside Array#reduce() you can achieve dynamic sorting:

const compare = (a, b) => {
  if (a < b)
    return -1;
  
  if (a > b)
    return 1;
    
  return 0;
}

function sorter(arr, sorts) {
  const keys = sorts.split(",");
  return arr.sort((a, b) => 
    keys.reduce((acc, key) => acc || compare(a[key], b[key]), 0)
  );
}

var planets_info = [
  { "name": "Mercury", "size": 120, "color": "gray", },
  { "name": "Earth"  , "size": 100, "color": "blue", },
  { "name": "Mars"   , "size": 200, "color": "red" , }
];

const result1 = sorter(
  [
    { "name": "Mercury", "size": 120, "color": "gray", },
    { "name": "Earth"  , "size": 100, "color": "blue", },
    { "name": "Mars"   , "size": 200, "color": "red" , }
  ],
  "name,size,color"
);

console.log('sorted by "name,size,color":', result1);


const result2 = sorter(
  [
    { "name": "Mercury", "size": 120, "color": "gray", },
    { "name": "Earth"  , "size": 100, "color": "blue", },
    { "name": "Mars"   , "size": 200, "color": "red" , }
  ],
  "size,name,color"
);

console.log('sorted by "name,size,color":', result2);


const result3 = sorter(
  [
    { "name": "Mercury", "size": 120, "color": "gray", },
    { "name": "Earth"  , "size": 100, "color": "blue", },
    { "name": "Mars"   , "size": 200, "color": "red" , }
  ],
  "color,name,size"
);

console.log('sorted by "name,size,color":', result3);


const result4 = sorter(
  [
    { "name": "Earth", "size": 120, "color": "blue", },
    { "name": "Earth", "size": 100, "color": "blue", },
    { "name": "Earth", "size": 200, "color": "blue" , }
  ],
  "name,color,size"
);

console.log('three Earths sorted by "name,color,size":', result4);

Answer 3

Note that subtracting strings doesn't work for comparisons. To properly handle numbers and strings, you'll need a more general comparison function.

const planets_info = [    {    "name": "Mercury",    "size": 120,    "color": "gray",  },  {    "name": "Earth2",    "size": 100,    "color": "blue",  },  {    "name": "WEarth",    "size": 100,    "color": "blue",  },  {    "name": "Mars",    "size": 200,    "color": "red",  }];
const sorts = ['size','name'];

function sortByKeys(array,keys) {
    // works on numbers and strings
    function primitiveCompare(a,b) {
        if (a==b) return 0;
        if (a>b) return 1;
        else return -1;
    }
    array.sort((A,B)=>{
        // grab first non-zero comparison (emulates short-circuit)
        const compares = keys.map(k=>primitiveCompare(A[k],B[k]));
        return compares.filter(x=>x)[0]
    });
}

sortByKeys(planets_info,sorts);
console.log(planets_info)