Data manipulation with JavaScript

When working with data arrays, you often need to combine different datasets. This tutorial shows how to merge a months array with a cashflows array to create a complete dataset with all months represented.

Problem Statement

Suppose we have two arrays describing cashflow data:

const months = ["jan", "feb", "mar", "apr"];
const cashflows = [
    {'month':'jan', 'value':10},
    {'month':'mar', 'value':20}
];

console.log("Months:", months);
console.log("Cashflows:", cashflows);

Months: [ 'jan', 'feb', 'mar', 'apr' ]
Cashflows: [ { month: 'jan', value: 10 }, { month: 'mar', value: 20 } ]

We need to create a function that combines these arrays into a complete dataset where every month has an entry, with empty values for months without cashflow data.

Expected Output

The desired output should include all months with their corresponding values or empty strings for missing data:

[
    {'month':'jan', 'value':10},
    {'month':'feb', 'value':''},
    {'month':'mar', 'value':20},
    {'month':'apr', 'value':''}
]

Solution Using map() and reduce()

Here's an efficient solution that uses reduce() to create a lookup object and map() to build the final array:

const months = ["jan", "feb", "mar", "apr"];
const cashflows = [
    {'month':'jan', 'value':10},
    {'month':'mar', 'value':20}
];

const combineArrays = (months = [], cashflows = []) => {
    let res = [];
    res = months.map(function(month) {
        return this[month] || { month: month, value: '' };
    }, cashflows.reduce((acc, val) => {
        acc[val.month] = val;
        return acc;
    }, Object.create(null)));
    return res;
};

console.log(combineArrays(months, cashflows));

[
    { month: 'jan', value: 10 },
    { month: 'feb', value: '' },
    { month: 'mar', value: 20 },
    { month: 'apr', value: '' }
]

How It Works

The solution works in two steps:

1. Create lookup object: reduce() converts the cashflows array into an object where month names are keys
2. Map months: map() iterates through each month and either finds the matching cashflow or creates an empty entry

Alternative Approach Using find()

Here's a more readable alternative using the find() method:

const combineArraysSimple = (months, cashflows) => {
    return months.map(month => {
        const found = cashflows.find(cf => cf.month === month);
        return found || { month: month, value: '' };
    });
};

console.log(combineArraysSimple(months, cashflows));

[
    { month: 'jan', value: 10 },
    { month: 'feb', value: '' },
    { month: 'mar', value: 20 },
    { month: 'apr', value: '' }
]

Comparison

Conclusion

Both approaches effectively merge arrays to create complete datasets. Use the reduce() method for better performance with large data, or find() for simpler, more readable code.