Is there a benefit to using lodash.merge (or other utilities of the same feature) versus merging via object destructuring?
Deep Merge using Lodash
Lodash merge including undefined values
Lodash merging and unioning of nested array / object structure
» npm install lodash.merge
Is there some kind of edge case that lodash (or other merge utilities) takes care of that const output = {...a, ...b} doesn't? (Assuming a and b are both valid)
You can turn both arrays into objects using _.keyBy(arr, 'label'), and then merge deep using _.merge():
var originalAddresses = [{
label: 'home',
address: {
city: 'London',
zipCode: '12345'
}
}, {
label: 'work',
address: {
city: 'New York',
zipCode: '54321'
}
}];
var updatedAddresses = [{
label: 'home',
address: {
city: 'London (Central)',
country: 'UK'
}
}, {
label: 'spain',
address: {
city: 'Madrid',
zipCode: '55555'
}
}];
var result = _.values(_.merge(
_.keyBy(originalAddresses, 'label'),
_.keyBy(updatedAddresses, 'label')
));
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
I try to use VanillaJS to handle this.
const originalAddresses = [{
label: 'home',
address: {
city: 'London',
zipCode: '12345'
}
}, {
label: 'work',
address: {
city: 'New York',
zipCode: '54321'
}
}];
const updatedAddresses = [{
label: 'home',
address: {
city: 'London (Central)',
country: 'UK'
}
}, {
label: 'spain',
address: {
city: 'Madrid',
zipCode: '55555'
}
}];
const groupBy = (array, property) => {
return array.reduce((acc, cur) => {
let key = cur[property]
if (!acc[key]) {
acc[key] = []
}
acc[key].push(cur)
return acc
}
, {})
}
const groupByLabel = groupBy([...originalAddresses, ...updatedAddresses], 'label')
const result = Object.keys(groupByLabel).map((key) => {
return {
label: groupByLabel[key][0].label,
address: groupByLabel[key].reduce((acc, cur) => {
return Object.assign(acc, cur.address)
}
, {})
}
}
)
console.log(result)
The complexity with this problem is that you want to merge on 2 different layers:
- you want to merge two arrays of towns, so you need to decide what to do with towns common to the two arrays;
- when handling two towns with common name, you want to merge their occupants.
Now, both _.merge and _.mergeWith are good candidates to accomplish the task, except that they are for operating on objects (or associative maps, if you like), whereas you have vectors of pairs (well, not really pairs, but objects with two elements with fixed keys; name/status and townName/occupants are fundamentally key/value) at both layers mentioned above.
One function that can be useful in this case is one that turns an array of pairs into an object. Here's such a utility:
arrOfPairs2Obj = (k, v) => (arr) => _.zipObject(..._.unzip(_.map(arr, _.over([k, v]))));
Try executing the following
townArr2townMap = arrOfPairs2Obj('townName', 'occupants');
mapA = townArr2townMap(arrayA);
mapB = townArr2townMap(arrayB);
to see what it does.
Now you can merge mapA and mapB more easily…
_.mergeWith(mapA, mapB, (a, b) => {
// … well, not that easily
})
Again, a and b are arrays of "pairs" name/status, so we can reuse the abstraction I showed above, defining
personArr2personMap = arrOfPairs2Obj('name', 'status');
and using it on a and b.
But still, there are some problems. I thought that the (a, b) => { … } I wrote above would be called by _.mergeWith only for elements which have the same key across mapA and mapB, but that doesn't seem to be the case, as you can verify by running this line
_.mergeWith({a: 1, b: 3}, {b:2, c:4, d: 6}, (x, y) => [x, y])
which results in
{
a: 1
b: [3, 2]
c: [undefined, 4]
d: [undefined, 6]
}
revealing that the working lambda is called for the "clashing" keys (in the case above just b), and also for the keys which are absent in the first object (in the case above c and d), but not for those absent in the second object (in the case above a).
This is a bit unfortunate, because, while you could filter dead people out of towns which are only in arrayB, and you could also filter out those people which are dead in arrayB while alive in arrayA, you'd still have no place to filter dead people out of towns which are only in arrayA.
But let's see how far we can get. _.merge doc reads
Source objects are applied from left to right. Subsequent sources overwrite property assignments of previous sources.
So we can at least handle the merging of towns common across the array in a more straightforward way. Using _.merge means that if a person is common in the two arrays, we'll always pick the one from arrayB, whether that's (still) alive or (just) dead.
Indeed, a strategy like this doesn't give you the precise solution you want, but not even one too far from it,
notSoGoodResult = _.mergeWith(mapA, mapB, (a, b) => {
return _.merge(personArr2personMap(a), personArr2personMap(b));
})
its result being the following
{
town1: [
{name: "Charlie", status: "alive"},
{name: "Jim", status: "dead"}
],
town2: [
{name: "Rachel", status: "alive"}
],
town3:
Alice: "alive",
Bob: "dead",
Joe: "alive"
},
town5: {
Bob: "alive",
Ray: "alive",
Sam: "dead"
}
}
As you can see
Bobintown3is correctlydead,- we've not forgotten
Aliceintown3, - nor have we forogtten about
Joeintown3.
What is left to do is
- "reshaping"
town3andtown5to look liketown1andtown2(or alternatively doing the opposite), - filtering away all
deadpeople (there's no more people appearing with both thedeadandalivestatus, so you don't risk zombies).
Now I don't have time to finish up this, but I guess the above should help you in the right direction.
The bottom line, however, in my opinion, is that JavaScript, even with the power of Lodash, is not exactly the best tool for functional programming. _.mergeWith disappointed me, for the reason explained above.
Also, I want to mention that there a module named lodash/fp that
promotes a more functional programming (FP) friendly style by exporting an instance of
lodashwith its methods wrapped to produce immutable auto-curried iteratee-first data-last methods.
This shuould slightly help you be less verbose. With reference to your self answer, and assuming you wanted to write the lambda
person => {return person.status == "alive";}
in a more functional style, with "normal" Lodash you'd write
_.flowRight([_.curry(_.isEqual)('alive'), _.iteratee('status')])
whereas with lodash/fp you'd write
_.compose(_.isEqual('alive'), _.get('status'))
You can define a function for merging arrays with a mapper like this:
const union = (a1, a2, id, merge) => {
const dict = _.fromPairs(a1.map((v, p) => [id(v), p]))
return a2.reduce((a1, v) => {
const i = dict[id(v)]
if (i === undefined) return [...a1, v]
return Object.assign([...a1], { [i]: merge(a1[i], v) })
}, a1)
}
and use it like this:
union(
arrayA,
arrayB,
town => town.townName,
(town1, town2) => ({
...town1,
occupants: union(
town1.occupants,
town2.occupants,
occupant => occupant.name,
(occupant1, occupant2) => occupant1.status === 'alive' ? occupant1 : occupant2
).filter(occupant => occupant.status === 'alive')
})
)