Flatten Nested Array in JavaScript using Recursion

Nested array are quite commonly used in the javascript for data manipulations, and that's why we often need to Flatten nested array in javascript for processing purpose.

Flattening a nested array involves converting a multi-dimensional array into a single-dimensional array by extracting all elements and combining them into one array.

In this blog post, we will explore how to flatten nested arrays using recursion. We will also cover the ways to handle complex arrays of objects and flattening them effectively.

Let's Understanding Recursion Approach

In the context of flattening nested arrays, recursion can be used to iterate through the elements of an array, checking if each element is an array itself. If an element is an array, the function recursively flattens that array until all nested arrays are flattened.

Flatten Nested Array in JavaScript

Let's start by creating a function that can flatten a nested array using recursion. We will define a function called flattenArray that takes an array as input and returns a flattened array.

function flattenArray(arr) {
    let flatArray = [];

    arr.forEach((element) => {
        if (Array.isArray(element)) {
            // Recursive call
            flatArray.push(...flattenArray(element));
        } else {
            // Recursive call
            flatArray.push(element);
        }
    });

    return flatArray;
}

Example usage

const nestedArray = [1, [2, 3], [4, [5, 6]]];
const flattenedArray = flattenArray(nestedArray);
console.log(flattenedArray); // Output: [1, 2, 3, 4, 5, 6]

In the flattenArray function, we iterate over each element of the input array and handle 2 cases

1. If an element is an array, we recursively call flattenArray on that element and spread its contents into the flatArray.
2. If the element is not an array, we simply push it into the flatArray. This process continues until all nested arrays are flattened.

Flatten Nested Arrays of Objects

Flatten nested arrays of objects adds an additional layer of complexity. In this scenario, we need to consider not only nested arrays but also nested objects within the array.

Let's modify our flattenArray function to handle arrays of objects.

function flattenArray(arr) {
    let flatArray = [];

    arr.forEach((element) => {
        if (Array.isArray(element)) {
            flatArray.push(...flattenArray(element));
        } else if (typeof element === 'object' && !Array.isArray(element)) {
            flatArray.push(...flattenArray(Object.values(element)));
        } else {
            flatArray.push(element);
        }
    });

    return flatArray;
}

Example usage with array of objects

const arrayOfObjects = [{ a: 1 }, { b: [2, 3] }, { c: { d: [4, 5] } }];
const flattenedArray = flattenArray(arrayOfObjects);
console.log(flattenedArray); // Output: [1, 2, 3, 4, 5]

In this updated version of flattenArray, we check if the element is an object and not an array. If it is an object, we extract its values using Object.values() and recursively flatten the values.

This modification allows us to handle arrays of objects effectively and flatten them into a single-dimensional array.

Final Thoughts

Flattening nested arrays in JavaScript using recursion is an important problem both in development and in frontend interviews. By understanding how recursion works and applying it to flatten nested arrays, you can efficiently process and manipulate array data in your frontend development projects. 

Thank you for reading this blog post on flattening nested arrays in JavaScript using recursion. Stay tuned for more frontend development and interview related stuff.

Happy Coding :)

Asked in Frontend Interviews:

1. Frontend Interview Experience at Flipkart | UI Engineer 1

Further Learning

1. Best Resources to prepare for JavaScript Interview
2. Most asked Machine Coding Round Questions & Resources