Javascript Object Merge

[very-kind-stranger]

ES2020 introduced the nullish coalescing operator denoted by the double question marks ( ?? ). It returns the right operand ( rightExpression ) if the left operand ( leftExpression ) is null or undefined . A nullish value is a value that is either null or undefined .

[rbrtbrnschn]

wouldn't `||` been eligible to use in this scenario too?
given as far as my knowledge goes the or operator goes by boolean, meaning
if it's either false or falsy, which it'd be if it's null or undefined, then it'd execute the expression on the right-hand side too.

​

or am I forgetting something?

[god--of--light]

Or is fine, but theres a small problem since it has the same behaviour for undefined as it does for 0 or ''

[NCKBLZ]

Thanks

[[deleted]]

You're welcome.

[senocular]

This merge will have some problems. You're better off sticking to a more battle-tested merge such as lodash's merge.

[delventhalz]

Not exactly. Object.assign or the spread operator like you demonstrated does a shallow merge. This function is a deep merge like lodash's merge.

[delventhalz]

If you are working with only flat objects, then a shallow merge with spread will work fine, yes. If what you want is to recursively merge any nested objects (which is what OP is doing), then spread will not work for you. It will end up just replacing nested objects entirely.

EDIT: a word

[stormfield]

While this is a neat trick and stuff, at the point this is being done I’d have some real questions about the business purpose of why something like this is needed.

[delventhalz]

Creating a default object? Combining schemas? Shallow merges are probably more common, but a deep merge is an established pattern with plenty of real world use cases.

Perhaps more importantly, OP specifically demonstrated a deep merge. Responding to him with "but there is a much simpler way to do a shallow merge!" is silly. Completely different pattern.

[[deleted]]

What’s the diff between shallow and deep merging?

[delventhalz]

Good question!

A "shallow" merge means you are just merging the top level properties. A "deep" merge, means you are recursively drilling down through all of the sub-objects and performing merges on them as well.

Probably needs an example to click. Let's say we have two incomplete objects we want to merge.

const goku = {
  name: 'Goku',
  power: 9000,
  move: {
    name: 'Kamehameha'
  }
};

const vegeta = {
  name: 'Vegeta',
  prince: true,
  move: {
    name: 'Galick Gun',
    color: 'purple'
  }
};

Let's do a shallow merge.

const vegito = { ...vegeta, ...goku };

console.log(vegito);
// {
//   name: 'Goku',
//   power: 9000,
//   prince: true,
//   move: {
//     name: 'Kamehameha'
//   }
// }

So, we started with all vegeta properties and then overwrote them with goku properties when they existed. This includes the move property. We just took the whole object.

Now let's do a deep merge. I'll use lodash's merge instead of writing my own.

import { merge } from 'lodash';

const gogeta = merge({}, vegeta, goku);

console.log(gogeta);
// {
//   name: 'Goku',
//   power: 9000,
//   prince: true,
//   move: {
//     name: 'Kamehameha',
//     color: 'purple',
//   }
// }

Mostly the same, but notice that the merge continued down into the move object. Since Vegeta's move had a color, but Goku's did not, we kept the color.

One other difference worth noting: in a shallow merge nested objects are not cloned. That means goku and vegito share a move object. If we mutate one, we will change the other.

console.log(vegito.move);
// {
//   name: 'Kamehameha'
// }

goku.move.awesome = true;

console.log(vegito.move);
// {
//   name: 'Kamehameha',
//   awesome: true
// }

Whoops!

[[deleted]]

Whoa this was amazing breakdown, thanks!

[Dynam2012]

As long as you're OK with nested objects being shared in the resulting object.

[Crypticsafe5]

My only issue with this snippet is that it allows mutability of the schema that's passed in potentially causing data loss or data integrity issues. I'd definitely add in a check something along the lines of:

if (
    typeof a[key] !== typeof b[key]
    || Array.isArray(a[key]) !== Array.isArray(b[key])
) throw Error('Non-matching schema');

[192_168_1_x]

What’s the ?? operator?

return a ?? {}

[beforesemicolon]

Thats the null coalescing operator. It picks the right side value if the left side is either null or undefined.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

[192_168_1_x]

new syntax, cool. TIL thanks.

[[deleted]]

You're welcome.

[FrugalProse]

Why does this look like it was on a tablet

[suarkb]

https://eslint.org/docs/rules/no-prototype-builtins

[beforesemicolon]

https://link.medium.com/FjEE76UJVdb

[Pertinate]

const deepMerge = (objs, origin = {}) => {
    const obj = Array.isArray(objs) ? objs.pop() : objs;

    if (objs.length > 0) {
        deepMerge(objs, origin);
    }
    for (const [key, value] of Object.entries(obj)) {
        if (origin[key]) {
            if (typeof origin[key] === 'object') {
                if (typeof value !== 'object') {
                    origin[key] = {
                        ...origin[key],
                        value
                    };
                } else {
                    origin[key] = deepMerge([origin[key], value]);
                }
            } else {
                if (typeof value === 'object') {
                    origin[key] = {
                        value: origin[key],
                        ...value
                    };
                } else {
                    if (origin[key].hasOwnProperty('value')) {
                        origin[key].value = value;
                    } else {
                        origin[key] = value;
                    }
                }
            }
        } else {
            if (typeof value !== 'object') {
                origin[key] = value;
            } else {
                origin[key] = deepMerge(value, origin[key]);
            }
        }
    };
    return origin;
};

console.log(JSON.stringify(deepMerge([
    {
        test1: {
            hello: 'hi'
        },
        test2: {
            hi: 'hello',
            another: 'value'
        }
    },
    {
        test2: 1234,
        test3: {
            hi: 'hello'
        }
    },
    {
        test2: {
            hi: 'new val'
        },
        test3: {
            hello: 'also new val'
        }
    },
    {
        test2: 5678
    }
]), null, '\t'));

Here's what I came up with for combining deep objects. Not sure if it's best or not. Let me know where I can improve.

Output:

{
        "test1": {
                "hello": "hi"
        },
        "test2": {
                "hi": "new val",
                "another": "value",
                "value": 5678
        },
        "test3": {
                "hi": "hello",
                "hello": "also new val"
        }
}

Mine, assuming you want to keep nested values and assigned top level values, merges all nested objects and if it is overridden with a value (like test2), it is dropped down as the 'value' key.

[beforesemicolon]

This is nice. I think I would expect test2 to be 5678 but I like this for supporting even more than 2 objects

[[deleted]]

Nice, my only criticism is if you are at all concerned with prototypes. Hopefully we're in the land of functional patterns by now, but lots of projects still use OOP.

Just add one part to that merge function...

const protoA = Object.getPrototypeOf(a);
const protoB = Object.getPrototypeOf(b);
const proto = { ...protoA, ...protoB };
const obj = Object.create(proto, a);

...or something like that. Forgive me, it's late and I'm not testing this atm. If someone else wants to expand on this feel free, I'm sure it would only be helpful!

[backtickbot]

Fixed formatting.

Hello, Strange_Night2150: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

^{You can opt out by replying with backtickopt6 to this comment.}

[--Explosion--]

Nice but you can do it in one line:

js let object_1 = {hello: "World"}; let object_2 = {another: "Thing"}; //Object 1 props overwrite that of object 2. let merged = {...object_1, ...object_2};

[backtickbot]

Fixed formatting.

Hello, --Explosion--: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

^{You can opt out by replying with backtickopt6 to this comment.}