How to sort an array of object by two fields in JavaScript ?

We have given an array of objects and the task is to sort the array of elements by 2 fields of the object. There are two methods to solve this problem which are discussed below: 

Approach 1:

• First compare the first property, if both are unequal then sort accordingly.
• If they are equal then do the same for the second property.

Example: This example implements the above approach with a custom comparison function. 

Javascript

// Create an array of objects
let arr = [
    { first: 3, second: 4 },
    { first: 3, second: 1 },
    { first: 1, second: 10 }
];

// Apply array.sort with comparison function
arr.sort(function (a, b) {
    let af = a.first;
    let bf = b.first;
    let as = a.second;
    let bs = b.second;

    // If first value is same
    if (af == bf) {
        return (as < bs) ? -1 : (as > bs) ? 1 : 0;
    } else {
        return (af < bf) ? -1 : 1;
    }
});

// Display output
console.log("'" + JSON.stringify(arr[0])
    + ", " + JSON.stringify(arr[1]) + ", "
    + JSON.stringify(arr[2]) + "'");

Output

'{"first":1,"second":10}, {"first":3,"second":1}, {"first":3,"second":4}'

Approach 2:

• First compare the first property, If both are unequal then sort accordingly.
• If they are equal then do the same for the second property, this example is following the same approach but uses OR Gate to reduce the code.

Example: This example implements the above approach with a custom comparison function. 

Javascript

//  Create input array of objects
let arr = [
    { first: 3, second: 4 },
    { first: 3, second: 1 },
    { first: 1, second: 10 }
];

// Apply array.sort with custom comparision funtion
arr.sort(function (a, b) {

    // Compare first value then second
    return a.first - b.first || a.second - b.second;
});

// Display the output
console.log("'" + JSON.stringify(arr[0])
    + ", " + JSON.stringify(arr[1]) + ", "
    + JSON.stringify(arr[2]) + "'");

Output

'{"first":1,"second":10}, {"first":3,"second":1}, {"first":3,"second":4}'