How to sort a JavaScript object list based on a property when the property is not consistent

When sorting JavaScript object arrays with inconsistent properties, you need a custom comparator function. This scenario commonly occurs when some objects have date values while others have null or undefined dates.

The requirement is to display objects without dates at the top (sorted alphabetically by name), followed by objects with dates (sorted chronologically).

Problem Overview

Consider an array where some objects have date properties and others don't:

const items = [
    { name: "Charlie", date: "2024-03-15" },
    { name: "Alice", date: null },
    { name: "Bob", date: undefined },
    { name: "David", date: "2024-01-10" }
];

console.log("Original array:");
console.log(items);

Original array:
[
  { name: 'Charlie', date: '2024-03-15' },
  { name: 'Alice', date: null },
  { name: 'Bob', date: undefined },
  { name: 'David', date: '2024-01-10' }
]

Custom Sort Function

const sorter = ((a, b) => {
    // Both dates are undefined - sort alphabetically by name
    if (typeof a.date == 'undefined' && typeof b.date == 'undefined') {
        return a.name.localeCompare(b.name);
    }
    
    // Both dates are null - sort alphabetically by name
    if (a.date == null && b.date == null) {
        return a.name.localeCompare(b.name);
    }
    
    // One has no date (null/undefined), other has date - no date comes first
    if ((typeof a.date == 'undefined' || a.date == null) && 
        (typeof b.date != 'undefined' && b.date != null)) {
        return -1;
    }
    
    if ((typeof a.date != 'undefined' && a.date != null) && 
        (typeof b.date == 'undefined' || b.date == null)) {
        return 1;
    }
    
    // Both have valid dates - sort chronologically
    const d1 = Date.parse(a.date);
    const d2 = Date.parse(b.date);
    return d1 - d2;
});

// Apply the sort
const sortedItems = items.sort(sorter);
console.log("Sorted array:");
console.log(sortedItems);

Sorted array:
[
  { name: 'Alice', date: null },
  { name: 'Bob', date: undefined },
  { name: 'David', date: '2024-01-10' },
  { name: 'Charlie', date: '2024-03-15' }
]

Simplified Approach

Here's a cleaner version using a helper function:

const simplifiedSorter = (a, b) => {
    const hasDateA = a.date != null && typeof a.date !== 'undefined';
    const hasDateB = b.date != null && typeof b.date !== 'undefined';
    
    // If both have no date, sort by name
    if (!hasDateA && !hasDateB) {
        return a.name.localeCompare(b.name);
    }
    
    // If only one has a date, put the one without date first
    if (!hasDateA && hasDateB) return -1;
    if (hasDateA && !hasDateB) return 1;
    
    // Both have dates, sort chronologically
    return Date.parse(a.date) - Date.parse(b.date);
};

const testData = [
    { name: "Zoe", date: "2024-02-20" },
    { name: "Alice", date: null },
    { name: "Charlie" }, // no date property
    { name: "Bob", date: "2024-01-15" }
];

console.log("Simplified sorting result:");
console.log(testData.sort(simplifiedSorter));

Simplified sorting result:
[
  { name: 'Alice', date: null },
  { name: 'Charlie' },
  { name: 'Bob', date: '2024-01-15' },
  { name: 'Zoe', date: '2024-02-20' }
]

Key Points

• Objects without dates (null or undefined) appear first
• Objects without dates are sorted alphabetically by name
• Objects with dates appear second, sorted chronologically
• Use Date.parse() to convert date strings to comparable numbers
• The comparator returns -1, 0, or 1 to determine sort order

Conclusion

Custom comparator functions handle inconsistent object properties effectively. The key is checking for null/undefined values first, then applying appropriate sorting logic for each case.