Sorting an array objects by property having null value in JavaScript

When sorting arrays of objects in JavaScript, null values can disrupt the natural sorting order. This article shows how to sort objects by a property while ensuring null values appear at the end of the sorted array.

Understanding the Problem

When sorting objects by a numeric property, null values need special handling because they don't follow normal comparison rules. Our goal is to sort by the property value while pushing null values to the end.

The Solution Approach

We'll use a custom comparator function with JavaScript's sort() method. The key insight is to treat null values as Infinity during comparison, ensuring they sort to the end.

Implementation

// Helper function to handle null values
const handleNullValue = (val) => {
    return val === null ? Infinity : val;
};

// Custom comparator function
const sortWithNullsAtEnd = (a, b) => {
    return handleNullValue(a.value) - handleNullValue(b.value);
};

// Main sorting function
function sortObjectsByProperty(arr) {
    return arr.sort(sortWithNullsAtEnd);
}

// Test data
const students = [
    { name: 'alice', value: 3 },
    { name: 'bob', value: null },
    { name: 'charlie', value: 1 },
    { name: 'diana', value: null },
    { name: 'eve', value: 2 }
];

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

console.log("\nSorted array (nulls at end):");
console.log(sortObjectsByProperty(students));

Original array:
[
  { name: 'alice', value: 3 },
  { name: 'bob', value: null },
  { name: 'charlie', value: 1 },
  { name: 'diana', value: null },
  { name: 'eve', value: 2 }
]

Sorted array (nulls at end):
[
  { name: 'charlie', value: 1 },
  { name: 'eve', value: 2 },
  { name: 'alice', value: 3 },
  { name: 'bob', value: null },
  { name: 'diana', value: null }
]

How It Works

The handleNullValue function converts null values to Infinity during comparison. Since Infinity is greater than any number, null values automatically sort to the end. Non-null values retain their original values for normal numeric comparison.

Alternative: Generic Solution

// Generic function for any property
function sortByPropertyNullsLast(arr, property) {
    return arr.sort((a, b) => {
        const aVal = a[property] === null ? Infinity : a[property];
        const bVal = b[property] === null ? Infinity : b[property];
        return aVal - bVal;
    });
}

// Example with different property
const products = [
    { name: 'laptop', price: 999 },
    { name: 'phone', price: null },
    { name: 'tablet', price: 299 },
    { name: 'watch', price: null }
];

console.log(sortByPropertyNullsLast(products, 'price'));

[
  { name: 'tablet', price: 299 },
  { name: 'laptop', price: 999 },
  { name: 'phone', price: null },
  { name: 'watch', price: null }
]

Time and Space Complexity

The time complexity is O(n log n) due to JavaScript's Timsort algorithm used in Array.sort(). Space complexity is O(1) as the sorting is done in-place, though the comparison function adds minimal overhead.

Conclusion

By treating null values as Infinity in the comparator function, we can easily sort object arrays while ensuring null values appear at the end. This approach works with any numeric property and maintains the natural sort order for non-null values.