Merging JavaScript Array Objects Based on Common Keys: Methods and Implementation

Introduction

In JavaScript programming, when working with arrays containing objects, it is often necessary to merge objects based on a common property, such as a key value. This need is particularly common in data aggregation, API response processing, or state management. This article will use a specific example as a basis to explore how to efficiently merge objects in an array that share the same name property, especially handling cases where the value property may be a string or an array. The example input array contains three objects, two of which share name: "foo1", requiring them to be merged into a single object with all value values consolidated into an array.

Core Problem Analysis

The main challenge in merging operations lies in dynamically handling different data types. In the given example, the value property can be a string (e.g., "val1") or an array (e.g., ["val2", "val3"]). During merging, it is essential to ensure that in the final output, the value for each name is uniformly formatted as an array containing all original values. This requires an algorithm capable of identifying duplicate keys, aggregating values, and handling type conversions. From an algorithmic complexity perspective, an ideal solution should have O(n) time complexity to avoid performance degradation from nested loops.

Best Practice Implementation

Referring to the highest-rated answer, we implement the merge using a forEach loop and the filter method. Below is a detailed code implementation based on this logic:

var array = [
    {
        name: "foo1",
        value: "val1"
    }, {
        name: "foo1",
        value: ["val2", "val3"]
    }, {
        name: "foo2",
        value: "val4"
    }
];

var output = [];

array.forEach(function(item) {
    var existing = output.filter(function(v, i) {
        return v.name == item.name;
    });
    if (existing.length) {
        var existingIndex = output.indexOf(existing[0]);
        output[existingIndex].value = output[existingIndex].value.concat(item.value);
    } else {
        if (typeof item.value == 'string')
            item.value = [item.value];
        output.push(item);
    }
});

console.log(output);

This implementation first initializes an empty array output. It iterates through the input array using forEach, and for each object, uses filter to check if an object with the same name already exists in output. If it exists, the current value is merged into the existing array using the concat method; otherwise, the current object is added to output, with the value converted to an array if it is a string. This approach ensures data integrity and consistency while maintaining clear and readable code.

Alternative Approaches and Comparison

In addition to the above method, other answers provide alternative implementations based on reduce. For example, one solution uses reduce with an internal loop to find duplicates, but this may increase time complexity due to nested operations. Another modern approach leverages ES2021's logical nullish assignment (??=) and Array.isArray, improving efficiency through object mapping:

const result = arrays.reduce((acc, {name, value}) => {
    acc[name] ??= {name: name, value: []};
    if (Array.isArray(value))
        acc[name].value = acc[name].value.concat(value);
    else
        acc[name].value.push(value);
    return acc;
}, {});

console.log(Object.values(result));

This solution uses an object acc as a temporary map, with keys as name and values as merged objects. The ??= operator ensures initialization only when the key does not exist, after which merging is performed based on the value type. Finally, Object.values converts the map back to an array. This method may be more efficient for large datasets but relies on newer JavaScript features.

Performance and Readability Considerations

In terms of performance, the best practice solution has a worst-case time complexity of O(n²) due to the linear search with filter in output, but this is generally acceptable for small to medium-sized arrays. For large-scale data processing, consider using Map or object mapping to optimize lookup operations to O(1). In terms of readability, the forEach approach intuitively demonstrates the merging process, making it suitable for teaching and maintenance. In practical applications, the choice of solution should balance browser compatibility, data scale, and team coding standards.

Conclusion

Merging JavaScript array objects based on common key values is a common and practical programming task. Through the analysis in this article, we have demonstrated how to implement robust merging logic using forEach and filter, and explored modern alternative approaches based on reduce. Key points include handling mixed data types, ensuring output consistency, and optimizing performance. Developers can choose appropriate methods based on specific needs, emphasizing code clarity and scalability. As JavaScript standards evolve, more efficient operators and data structures will further simplify such tasks in the future.