how to rescursively deep merge an array of objects

Question

I want to merge two arrays of objects. Those objects have the same structure, but one of them is missing the hide property. I want to copy the value of hide property from one object to the other that is missing this property. The important part is that I don't want to mutate any of these arrays!

The first array looks like this (notice that there is hide property):

let first_array = [
    {
        name: 'John',
        age: 40,
        hide: true,
        childs: [
            {
                name: 'Alice',
                age: 20,
                hide: false,
                childs: [
                    {
                        name: 'Mike',
                        age: 2,
                        hide: true
                    }
                ]
            }
        ]
    },
    {
        name: 'Peter',
        age: 40,
        hide: true,
        childs: [
            {
                name: 'Andrew',
                age: 20,
                hide: true,
                childs: [
                    {
                        name: 'Jessica',
                        age: 2,
                        hide: true
                    }
                ]
            }
        ]
    }
]

The second array looks almost the same! The only thing missing is hide property.

let second_array = [
    {
        name: 'John',
        age: 40,
        childs: [
            {
                name: 'Alice',
                age: 20,
                childs: [
                    {
                        name: 'Mike',
                        age: 2,
                    }
                ]
            }
        ]
    },
    {
        name: 'Peter',
        age: 40,
        childs: [
            {
                name: 'Andrew',
                age: 20,
                childs: [
                    {
                        name: 'Jessica',
                        age: 2,
                    }
                ]
            }
        ]
    }
]

Now, I want to create new array with where within each object there is hide property.

I know how to do this recursively in the imperative way, but unfortunately I'm mutating data - which I don't want to do.

function getHideProperty(first, second) {
    for (let i = 0; i < second.length; i++) {
        for (let j = 0; j < first.length; j++) {
            if (second[i].name === first[j].name) {
                second[i].hide = first[j].hide
                if (second[i].childs) {
                    second[i].childs = getHideProperty(first[j].childs, second[i].childs)
                }
            }
        }
    }
    return second
}

Now I can create new array with merged objects:

const newArray = getHideProperty(second_array, first_array)

Now, every object in second_array has hide property. But I mutated the array :(

How to achieve such result without mutating the array?

Answer 1

You'll need to:

1. Create a new array to store the new information, and return that

2. Deep-copy second[i] to store in the new array, prior to modifying anything

For #2, choose your favorite answer from What is the most efficient way to deep clone an object in JavaScript?

For #1, very roughly (see comments):

function getHideProperty(first, second) {
    const result = []; // Our result array
    for (let i = 0; i < second.length; i++) {
        const secondEntry = result[i] = deepCopy(second[i]); // The deep copy, and let's avoid constantly re-retrieving second[i]/result[i]
        for (let j = 0; j < first.length; j++) {
            if (secondentry.name === first[j].name) {
                secondentry.hide = first[j].hide
                if (secondEntry.childs) {
                    // Could be more efficient here, since the entries in `childs` are already copies; left as an exercise to the reader...
                    secondEntry.childs = getHideProperty(first[j].childs, secondEntry.childs)
                }
            }
        }
    }
    return result;
}

This is not meant to be an all-singing, all-dancing solution. It's meant to help you along the way. Note the deepCopy placeholder for your preferred solution to #2. :-)

---

If you do something like the above (nested loops) and find that it's a performance problem, you can create a Map of the entries in first keyed by their names, and then look them up in the map when looping through second (rather than the nested loop). The complexity is only useful if you run into a performance problem with the simple nested loops solution.

Answer 2

This is a functional approach that doesn't mutate any of the original arrays or their items:

function getHideProperty(first, second) {
    return second.map(function(item) {
        var corresponding = first.find(function(searchItem) {
            return searchItem.name === item.name;
        });
        return Object.assign({},
          item,
          { hide: corresponding.hide },
          item.childs
            ? { childs: getHideProperty(item.childs, corresponding.childs) } 
            : {}
        );
    });
}