Flatten nested object in JavaScript using recursion [JavaScript Interview]

When working with nested objects in JavaScript, there might be scenarios where you need to flatten the object to a single level to perform other operations on that flattened object.

In this blog post, we will explore how to flatten a nested object using a recursive approach. We will cover the recursive code, how to approach and provide step-by-step explanations.

Flatten nested object in JavaScript using recursion

Let's explore flattening nested objects in JavaScript using a recursive approach, accompanied by code and an explanation.

Recursive Approach to Flatten Nested Object

Flattening a nested object involves converting a nested structure into a flat structure where all nested properties are combined into a single-level object. To achieve this, we can use a recursive function to iterate through the nested object and flatten it.

Recursive Code Example

 function flattenObject(obj) {
    let flattened = {};

    for (let key in obj) {
        if (typeof obj[key] === 'object' && obj[key] !== null) {
            let flatObj = flattenObject(obj[key]);
            for (let flatKey in flatObj) {
                flattened[`${key}.${flatKey}`] = flatObj[flatKey];
            }
        } else {
            flattened[key] = obj[key];
        }
    }

    return flattened;
}

// Example object to flatten
const nestedObj = {
    key1: 'value1',
    key2: {
        key3: 'value3',
        key4: {
            key5: 'value5'
        }
    }
};

const flattenedObj = flattenObject(nestedObj);
console.log(flattenedObj);     

Approaching a Recursive Solution

When approaching a recursive solution to flatten a nested object, consider the following steps:

1. Start with a base case: Check if the current key in the object is a primitive type (number, string). If it is, add it to the flattened object.
2. Check for object: If the current key is an object, recursively call the flatten function on that object.
3. Combine with existing Object: Combine the flattened object with the current key and its value.
4. Return the flattened object.

Step-by-Step Code Explanation

Let's walk through the step-by-step process of flattening a nested object using the provided code example:

1. Define a function flattenObject that takes an object as its parameter to flatten
2. Initialize an empty object flattened to store the flattened key-value pairs.
3. Iterate over each key in the object.
4. If the value of the key is an object -> we recursively call flattenObject on that nested object.
5. We combine the flattened object with the current key and its value. If the key is nested, we concatenate the keys using dot notation.
6. We return the flattened object once all keys are processed.

Final thoughts

Flattening nested objects using recursion is a commonly asked JavaScript interview question and is also used in development. By understanding the recursive approach, writing efficient code, you can effectively flatten any nested object structure, and this even helps to understand the flattening of nested arrays as well.

Learn Next

1. Most asked JavaScript questions for beginners.
2. Promise polyfill in JavaScript
3. Polyfill.all polyfill in JavaScript