Sorting an array including the elements present in the subarrays in JavaScript

In JavaScript, we often encounter arrays that contain nested subarrays and need to sort all elements together. This involves flattening the nested structure and then applying sorting algorithms.

Understanding the Required Methods

Before diving into solutions, let's understand the key JavaScript methods we'll use:

sort() method: Sorts array elements in place. By default, it converts elements to strings and sorts alphabetically. For numeric sorting, we provide a comparison function:

let numbers = [3, 1, 4, 1, 5, 9, 2, 6];
numbers.sort((a, b) => a - b); // ascending order
console.log(numbers);

[ 1, 1, 2, 3, 4, 5, 6, 9 ]

flat() method: Creates a new array with all sub-array elements concatenated. It flattens one level deep by default, but accepts a depth parameter:

let nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat());    // one level deep
console.log(nested.flat(2));   // two levels deep

[ 1, 2, 3, 4, [ 5, 6 ] ]
[ 1, 2, 3, 4, 5, 6 ]

Array.isArray() method: Determines whether a value is an array, returning a boolean:

console.log(Array.isArray([1, 2, 3]));     // true
console.log(Array.isArray("hello"));       // false
console.log(Array.isArray({name: "John"})); // false

true
false
false

Method 1: Using flat() and sort()

The simplest approach combines the built-in flat() and sort() methods:

const arr = [4, 2, [5, 1], 3, [6, [8, 7]]];

// Flatten completely (Infinity flattens all levels)
const flatArr = arr.flat(Infinity);

// Sort in ascending order
flatArr.sort((a, b) => a - b);

console.log("Original array:", arr);
console.log("Sorted flattened array:", flatArr);

Original array: [ 4, 2, [ 5, 1 ], 3, [ 6, [ 8, 7 ] ] ]
Sorted flattened array: [ 1, 2, 3, 4, 5, 6, 7, 8 ]

Method 2: Recursive Flattening

For more control or when working with older JavaScript environments, we can create a custom recursive solution:

function flattenAndSort(arr) {
  const flatArr = [];

  function flattenHelper(arr) {
    for (let i = 0; i < arr.length; i++) {
      if (Array.isArray(arr[i])) {
        flattenHelper(arr[i]); // recursively flatten subarray
      } else {
        flatArr.push(arr[i]); // add element to flat array
      }
    }
  }

  flattenHelper(arr);
  flatArr.sort((a, b) => a - b); // sort in ascending order
  
  return flatArr;
}

// Example usage
const nestedArray = [4, 2, [5, 1], 3, [6, [8, 7]]];
const result = flattenAndSort(nestedArray);
console.log("Recursively flattened and sorted:", result);

Recursively flattened and sorted: [ 1, 2, 3, 4, 5, 6, 7, 8 ]

Method 3: One-liner Approach

For a concise solution, we can chain the methods:

const arr = [9, [3, 1], [7, [2, 5]], 4];

const sorted = arr.flat(Infinity).sort((a, b) => a - b);
console.log("One-liner result:", sorted);

One-liner result: [ 1, 2, 3, 4, 5, 7, 9 ]

Comparison of Methods

Time Complexity

Both approaches have O(n log n) time complexity, where n is the total number of elements after flattening. The flat() operation is O(n) for flattening, and sort() is O(n log n) for sorting, making the overall complexity O(n log n).

Conclusion

Use flat(Infinity).sort() for modern JavaScript environments as it's concise and efficient. For older browsers or when you need more control over the flattening process, the recursive approach works well.