How to Sort an Array of Objects with Null Properties in TypeScript ?

Sorting an array of objects with null properties in TypeScript involves arranging its elements based on non-null properties.

Below are the approaches used to sort an array of objects with null properties in TypeScript:

Approach 1: Using Array.prototype.sort with a ternary operator

In this approach, we Sort an array of objects with null properties using Array.prototype.sort and a ternary operator for comparison. Prioritizes sorting based on existing properties or default sorting criteria if properties are null.

Example: Here, we sort arr based on the name. Objects with non-null name properties are sorted alphabetically, and null properties are sorted by id.

Javascript

interface MyObject {
id: number;
name?: string;
}

const arr: MyObject[] = [
{ id: 3, name: "Rohit" },
{ id: 1, name: "Amit" },
{ id: 2, name: "Rahul" }
];


const result = arr.sort((a, b) => (a.name && b.name) ? 
    a.name.localeCompare(b.name) : 
    (a.name ? -1 : b.name ? 1 : a.id - b.id));

console.log(result);

Output:

[
  { id: 1, name: 'Amit' },
  { id: 2, name: 'Rahul' },
  { id: 3, name: 'Rohit' }
]

Approach 2: Using Array.prototype.reduce

In this approach we uses Array.prototype.reduce with a custom sorting function. It iterates over elements, inserting them into a sorted array based on their properties. Handles cases where properties are null.

Example: Here, we Sorts arr based on name. Uses Array.prototype.reduce with functional programming to insert elements into a new array at the correct position. Prints the result.

Javascript

interface MyObject {
id: number;
name?: string;
}

const arr: MyObject[] = [
{ id: 3, name: "Rohit" },
{ id: 1, name: "Amit" },
{ id: 2, name: "Rahul" }
];

const result = 
    arr.reduce((acc: MyObject[], curr: MyObject) => {
const index = acc.findIndex((obj: MyObject) => {
    if (curr.name && obj.name) {
    return curr.name.localeCompare(obj.name) < 0;
    } else {
    return !obj.name;
    }
});
return index !== -1
    ? [...acc.slice(0, index), curr, ...acc.slice(index)]
    : [...acc, curr];
}, []);

console.log(result);

Output:

[
  { id: 1, name: 'Amit' },
  { id: 2, name: 'Rahul' },
  { id: 3, name: 'Rohit' }
]

Approach 3: Using Array.prototype.filter() and concat()

Filter out objects with null properties, sort the remaining objects based on their non-null property, then concatenate them with objects having null properties to maintain original order.

Example: In this example we filter out objects with defined names, sorts them by name, then concatenates them with objects having undefined names, resulting in the sorted array.

JavaScript

interface MyObject {
    id: number;
    name?: string;
}

const arr: MyObject[] = [
    { id: 3, name: "Rohit" },
    { id: 1, name: "Amit" },
    { id: 2, name: "Rahul" }
];

const sortedArray = arr
    // Filter out objects with undefined names
    .filter(obj => obj.name !== undefined) 
    // Sort by name
    .sort((a, b) => a.name!.localeCompare(b.name!)) 
     // Concatenate with objects having undefined names
    .concat(arr.filter(obj => obj.name === undefined)); 
  

console.log(sortedArray);

Output:

[
  { id: 1, name: 'Amit' },
  { id: 2, name: 'Rahul' },
  { id: 3, name: 'Rohit' }
]