Natural Sort in JavaScript

Natural sort in JavaScript refers to sorting arrays containing mixed data types (numbers and strings) in a way that numbers come first in ascending order, followed by strings in alphabetical order.

Problem Statement

When sorting mixed arrays with the default sort() method, JavaScript converts everything to strings, leading to incorrect ordering. We need a custom sorting function that handles numbers and strings separately.

Example Input and Expected Output

Let's say this is our array:

const arr = [1, 'fdf', 'afv', 6, 47, 7, 'svd', 'bdf', 9];
console.log("Original array:", arr);

Original array: [ 1, 'fdf', 'afv', 6, 47, 7, 'svd', 'bdf', 9 ]

The expected output should be:

[1, 6, 7, 9, 47, 'afv', 'bdf', 'fdf', 'svd']

Solution: Custom Sorting Function

We'll create a custom comparator function that handles different data type combinations:

const arr = [1, 'fdf', 'afv', 6, 47, 7, 'svd', 'bdf', 9];

const naturalSorter = (a, b) => {
    // Both are numbers: sort numerically
    if (typeof a === 'number' && typeof b === 'number') {
        return a - b;
    }
    // 'a' is number, 'b' is string: number comes first
    else if (typeof a === 'number' && typeof b !== 'number') {
        return -1;
    }
    // 'a' is string, 'b' is number: number comes first
    else if (typeof a !== 'number' && typeof b === 'number') {
        return 1;
    }
    // Both are strings: sort alphabetically
    else {
        return a > b ? 1 : -1;
    }
};

// Apply the sorting function
arr.sort(naturalSorter);
console.log("Naturally sorted array:", arr);

Naturally sorted array: [ 1, 6, 7, 9, 47, 'afv', 'bdf', 'fdf', 'svd' ]

How It Works

The naturalSorter function compares two elements and returns:

• Negative value: First element should come before second
• Positive value: First element should come after second
• Zero: Elements are equal (no change in order)

The sorting logic prioritizes numbers over strings, then sorts each type appropriately.

Alternative Approach: Separate and Combine

Another method involves separating numbers and strings first:

const mixedArray = [1, 'zebra', 'apple', 15, 3, 'banana'];

// Separate numbers and strings
const numbers = mixedArray.filter(item => typeof item === 'number').sort((a, b) => a - b);
const strings = mixedArray.filter(item => typeof item === 'string').sort();

// Combine sorted arrays
const naturalSorted = [...numbers, ...strings];

console.log("Original:", mixedArray);
console.log("Natural sorted:", naturalSorted);

Original: [ 1, 'zebra', 'apple', 15, 3, 'banana' ]
Natural sorted: [ 1, 3, 15, 'apple', 'banana', 'zebra' ]

Comparison of Methods

Conclusion

Natural sorting in JavaScript requires custom logic to handle mixed data types. The custom comparator approach is more efficient, while the separate-and-combine method is more readable for complex scenarios.