How to count a depth level of nested JavaScript objects?

We have an array of objects, which further have nested objects like this ?

const arr = [{
    id: 0, children: []
}, {
    id: 1, children: [{
        id: 2, children: []
    }, {
        id: 3, children: [{
            id: 4, children: []
        }]
    }]
}];

Our job is to write a recursive function, say assignDepth() that takes in this array and assigns depth property to each nested object. Like the object with id 0 will have depth 0, id 1 will have depth 0 as well, and since id 2 and id 3 are nested inside id 1 they will have depth 1 and id 4 which is further nested inside id 3 will have depth 2.

Understanding the Problem

The depth level represents how deeply nested an object is within the hierarchical structure. Objects at the root level have depth 0, their direct children have depth 1, and so on.

Method 1: Using Recursive Function with Index Tracking

Here's the recursive solution that processes the nested structure:

const arr = [{
    id: 0, children: []
}, {
    id: 1, children: [{
        id: 2, children: []
    }, {
        id: 3, children: [{
            id: 4, children: []
        }]
    }]
}];

const assignDepth = (arr, depth = 0, index = 0) => {
    if(index < arr.length){
        arr[index].depth = depth;
        if(arr[index].children.length){
            assignDepth(arr[index].children, depth + 1, 0);
        }
        assignDepth(arr, depth, index + 1);
    }
    return;
};

assignDepth(arr);
console.log(JSON.stringify(arr, null, 2));

[
  {
    "id": 0,
    "children": [],
    "depth": 0
  },
  {
    "id": 1,
    "children": [
      {
        "id": 2,
        "children": [],
        "depth": 1
      },
      {
        "id": 3,
        "children": [
          {
            "id": 4,
            "children": [],
            "depth": 2
          }
        ],
        "depth": 1
      }
    ],
    "depth": 0
  }
]

Method 2: Using forEach for Cleaner Code

A more readable approach using forEach instead of manual index tracking:

const arr2 = [{
    id: 0, children: []
}, {
    id: 1, children: [{
        id: 2, children: []
    }, {
        id: 3, children: [{
            id: 4, children: []
        }]
    }]
}];

const assignDepthWithForEach = (objects, depth = 0) => {
    objects.forEach(obj => {
        obj.depth = depth;
        if (obj.children && obj.children.length > 0) {
            assignDepthWithForEach(obj.children, depth + 1);
        }
    });
};

assignDepthWithForEach(arr2);
console.log("Using forEach method:");
console.log(JSON.stringify(arr2, null, 2));

Using forEach method:
[
  {
    "id": 0,
    "children": [],
    "depth": 0
  },
  {
    "id": 1,
    "children": [
      {
        "id": 2,
        "children": [],
        "depth": 1
      },
      {
        "id": 3,
        "children": [
          {
            "id": 4,
            "children": [],
            "depth": 2
          }
        ],
        "depth": 1
      }
    ],
    "depth": 0
  }
]

How It Works

The recursive function works by:

• Assigning the current depth to each object
• Checking if the object has children
• If children exist, recursively calling the function with depth + 1
• Processing all objects at the current level before moving deeper

Comparison

Conclusion

Both methods effectively assign depth levels to nested objects. The forEach approach is more readable and maintainable, making it the preferred choice for most use cases involving hierarchical data structures.