# How to Convert Nested Objects to Flat Objects in JavaScript.

I am sure you have been asked this question in one of the interviews.

It looks simple at first. But the interviewer is actually checking whether you understand recursion, objects, and how JavaScript treats arrays.

So basically, you are given a nested object, and you are expected to simplify it by removing the nesting and printing it in a non-nested format.

### Here is a simple input and output :

```javascript
const input = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: 3
    }
  }
};
```

### Output:

```javascript
 {  a: 1, 
    b_c: 2, 
    b_d_e: 3, 
 }
```

### Now look at the solution :

```javascript
function flatten(obj, prefix = "", res = {}) {
    // Loop through every key in the object
    for (let key in obj) {

        // Skip properties coming from prototype chain
        if (!obj.hasOwnProperty(key)) return;

        // If prefix exists, append current key using _
        // Otherwise just use the key itself
        let objKey = prefix ? `${prefix}_${key}` : key;

        let value = obj[key];

        // If value is an object and not null,
        // recursively flatten it
        if (typeof value === 'object' && value !== null) {
            flatten(value, objKey, res);
        } else {
            // If it's a primitive value, assign it directly
            res[objKey] = value;
        }
    }

    // Return the accumulated result
    return res;
}
```

Let us test it.

```javascript
const input = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: [1, 2]
    }
  }
};

console.log(flatten(input));

//  {a: 1, b_c: 2, b_d_e_0: 1, b_d_e_1: 2 }
```

Now observe something interesting.

It flattens the nested object correctly.

But it also destructures the array and adds indexes as keys.

*Why do you think that happened?*

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">As you know, everything in JavaScript is an object. Even <strong>Arrays</strong>.</div>
</div>

So when we check:

```javascript
typeof value === 'object'
```

Arrays also satisfy that condition.

That means our recursive call is going inside arrays as well, and treating indexes (0, 1) like object keys.

That is why we are getting:

```javascript
b_d_e_0: 1
b_d_e_1: 2
```

### **So, how do we fix it?**

Simple.

We add one more condition to ignore Arrays.

```javascript
function flatten(obj, prefix = "", res = {}) {
    for (let key in obj) {

        // Ensure we are working only with object's own properties
        if (!obj.hasOwnProperty(key)) return;

        let objKey = prefix ? `${prefix}_${key}` : key;
        let value = obj[key];

        // Only recurse if:
        // 1. value is an object
        // 2. value is not null
        // 3. value is NOT an array
        if (
            typeof value === 'object' &&
            value !== null &&
            !Array.isArray(value)
        ) {
            flatten(value, objKey, res);
        } else {
            // Directly assign primitives and arrays
            res[objKey] = value;
        }
    }

    return res;
}
```

## **Testing Both Cases**

```javascript
const input1 = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: [1, 2]
    }
  }
};

const input2 = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: 3
    }
  }
};

console.log(flatten(input1));
console.log(flatten(input2));

// { a: 1, b_c: 2, b_d_e: [ 1, 2 ] }
// { a: 1, b_c: 2, b_d_e: 3 }
```

That is it.

A simple recursion problem. But it tests whether you truly understand:

*   How objects work
    
*   How arrays behave internally
    
*   How recursion accumulates results
    
*   And how small edge cases can break your logic
    

This is why interviewers love this question.

That’s all, folks! I hope you found this helpful. If you enjoyed this, check out more articles on my Blog, [**https://blog.nandan.dev/**](https://blog.nandan.dev/)

Feel free to comment, email me at [**connect@nandan.dev**](mailto:connect@nandan.dev), or connect with me on Twitter, Instagram, or GitHub. Don’t forget to subscribe to my newsletter for regular updates on JavaScript topics!

[**Twitter**](https://twitter.com/_sirius93_) | [**Instagram**](https://www.instagram.com/nandandotdev) | [**Github**](https://github.com/sirius93) | [**Website**](https://nandan.dev/)