Reply to thread

Message

<blockquote data-quote="codeguru" data-source="post: 55" data-attributes="member: 2">I recently shared how you can <a href="https://davidwalsh.name/merge-objects" target="_blank">merge object properties with the spread operator</a> but this method has one big limitation:&nbsp; the spread operator merge isn’t a “deep” merge, meaning merges are recursive.&nbsp; Moreover nested object properties aren’t merged — the last value specified in the merge replaces the last, even when there are other properties that should exist.const defaultPerson = {&nbsp; name: 'Anon',&nbsp; gender: 'Female',&nbsp; hair: {&nbsp; &nbsp; color: 'brown',&nbsp; &nbsp; cut: 'long'&nbsp; },&nbsp; eyes: 'blue',&nbsp; family: ['mom', 'dad']};const me = {&nbsp; name: 'David Walsh',&nbsp; gender: 'Male',&nbsp; hair: {&nbsp; &nbsp; cut: 'short'&nbsp; },&nbsp; family: ['wife', 'kids', 'dog']};const summary = {...defaultPerson, ...me};/*{&nbsp; &nbsp;&nbsp; &quot;name&quot;:&quot;David Walsh&quot;,&nbsp;&nbsp; &quot;gender&quot;:&quot;Male&quot;,&nbsp;&nbsp; &quot;hair&quot;:{&nbsp; &nbsp; &nbsp; &nbsp; &quot;cut&quot;:&quot;short&quot;&nbsp;&nbsp; },&nbsp;&nbsp; &quot;eyes&quot;:&quot;blue&quot;,&nbsp;&nbsp; &quot;family&quot;:[&nbsp; &nbsp; &nbsp; &nbsp; &quot;wife&quot;,&nbsp; &nbsp; &nbsp; &quot;kids&quot;,&nbsp; &nbsp; &nbsp; &quot;dog&quot;&nbsp;&nbsp; ]}*/In the sample above, you’ll notice that the [ICODE]hair[/ICODE] object’s [ICODE]color[/ICODE] is gone instead of merged because the spread operator simply keeps the last provided values, which in this case is [ICODE]me.hair[/ICODE].&nbsp; The same merge problem applies to arrays — you’ll notice [ICODE]mom[/ICODE] and [ICODE]dad[/ICODE] aren’t merged from the [ICODE]defaultPerson[/ICODE] object’s [ICODE]family[/ICODE] array.&nbsp; Yikes!Deep merging in JavaScript is important, especially with the common practice of “default” or “options” objects with many properties and nested objects that often get merged with instance-specific values.&nbsp; If you’re looking for a utility to help with deep merges, look no further than the tiny <a href="https://github.com/KyleAMathews/deepmerge" target="_blank">deepmerge utility</a>!When you use the [ICODE]deepmerge[/ICODE] utility, you can recursively merge any number of objects (including arrays) into one final object.&nbsp; Let’s take a look!const deepmerge = require('deepmerge');// ...const summary = deepmerge(defaultPerson, me);/*{&nbsp; &nbsp;&nbsp; &quot;name&quot;:&quot;David Walsh&quot;,&nbsp;&nbsp; &quot;gender&quot;:&quot;Male&quot;,&nbsp;&nbsp; &quot;hair&quot;:{&nbsp; &nbsp; &nbsp; &nbsp; &quot;color&quot;:&quot;brown&quot;,&nbsp; &nbsp; &nbsp; &quot;cut&quot;:&quot;short&quot;&nbsp;&nbsp; },&nbsp;&nbsp; &quot;eyes&quot;:&quot;blue&quot;,&nbsp;&nbsp; &quot;family&quot;:[&nbsp; &nbsp; &nbsp; &nbsp; &quot;mom&quot;,&nbsp; &nbsp; &nbsp; &quot;dad&quot;,&nbsp; &nbsp; &nbsp; &quot;wife&quot;,&nbsp; &nbsp; &nbsp; &quot;kids&quot;,&nbsp; &nbsp; &nbsp; &quot;dog&quot;&nbsp;&nbsp; ]}*/[ICODE]deepmerge[/ICODE] can handle much more complicated merges: nested objects and [ICODE]deepmerge.all[/ICODE] to merge more than two objects:const result = deepmerge.all([,&nbsp; { level1: { level2: { name: 'David', parts: ['head', 'shoulders'] } } },&nbsp; { level1: { level2: { face: 'meh', parts: ['knees', 'toes'] } } },&nbsp; { level1: { level2: { eyes: 'more meh', parts: ['eyes'] } } },]);/*{&nbsp; &nbsp;&nbsp; &quot;level1&quot;:{&nbsp; &nbsp; &nbsp; &nbsp; &quot;level2&quot;:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &quot;name&quot;:&quot;David&quot;,&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &quot;parts&quot;:[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &quot;head&quot;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &quot;shoulders&quot;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &quot;knees&quot;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &quot;toes&quot;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &quot;eyes&quot;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &quot;face&quot;:&quot;meh&quot;,&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &quot;eyes&quot;:&quot;more meh&quot;&nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; }}*/[ICODE]deepmerge[/ICODE] is an amazing utility is a relatively small amount of code:function isMergeableObject(val) {&nbsp; &nbsp; var nonNullObject = val &amp;&amp; typeof val === 'object'&nbsp; &nbsp; return nonNullObject&nbsp; &nbsp; &nbsp; &nbsp; &amp;&amp; Object.prototype.toString.call(val) !== '[object RegExp]'&nbsp; &nbsp; &nbsp; &nbsp; &amp;&amp; Object.prototype.toString.call(val) !== '[object Date]'}function emptyTarget(val) {&nbsp; &nbsp; return Array.isArray(val) ? [] : {}}function cloneIfNecessary(value, optionsArgument) {&nbsp; &nbsp; var clone = optionsArgument &amp;&amp; optionsArgument.clone === true&nbsp; &nbsp; return (clone &amp;&amp; isMergeableObject(value)) ? deepmerge(emptyTarget(value), value, optionsArgument) : value}function defaultArrayMerge(target, source, optionsArgument) {&nbsp; &nbsp; var destination = target.slice()&nbsp; &nbsp; source.forEach(function(e, i) {&nbsp; &nbsp; &nbsp; &nbsp; if (typeof destination === 'undefined') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; destination = cloneIfNecessary(e, optionsArgument)&nbsp; &nbsp; &nbsp; &nbsp; } else if (isMergeableObject(e)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; destination = deepmerge(target, e, optionsArgument)&nbsp; &nbsp; &nbsp; &nbsp; } else if (target.indexOf(e) === -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; destination.push(cloneIfNecessary(e, optionsArgument))&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; &nbsp; return destination}function mergeObject(target, source, optionsArgument) {&nbsp; &nbsp; var destination = {}&nbsp; &nbsp; if (isMergeableObject(target)) {&nbsp; &nbsp; &nbsp; &nbsp; Object.keys(target).forEach(function (key) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; destination[key] = cloneIfNecessary(target[key], optionsArgument)&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; &nbsp; Object.keys(source).forEach(function (key) {&nbsp; &nbsp; &nbsp; &nbsp; if (!isMergeableObject(source[key]) || !target[key]) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; destination[key] = cloneIfNecessary(source[key], optionsArgument)&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; destination[key] = deepmerge(target[key], source[key], optionsArgument)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; &nbsp; return destination}function deepmerge(target, source, optionsArgument) {&nbsp; &nbsp; var array = Array.isArray(source);&nbsp; &nbsp; var options = optionsArgument || { arrayMerge: defaultArrayMerge }&nbsp; &nbsp; var arrayMerge = options.arrayMerge || defaultArrayMerge&nbsp; &nbsp; if (array) {&nbsp; &nbsp; &nbsp; &nbsp; return Array.isArray(target) ? arrayMerge(target, source, optionsArgument) : cloneIfNecessary(source, optionsArgument)&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; return mergeObject(target, source, optionsArgument)&nbsp; &nbsp; }}deepmerge.all = function deepmergeAll(array, optionsArgument) {&nbsp; &nbsp; if (!Array.isArray(array) || array.length &lt; 2) {&nbsp; &nbsp; &nbsp; &nbsp; throw new Error('first argument should be an array with at least two elements')&nbsp; &nbsp; }&nbsp; &nbsp; // we are sure there are at least 2 values, so it is safe to have no initial value&nbsp; &nbsp; return array.reduce(function(prev, next) {&nbsp; &nbsp; &nbsp; &nbsp; return deepmerge(prev, next, optionsArgument)&nbsp; &nbsp; })}Little code with big functionality?&nbsp; That's my favorite type of utility!&nbsp; [ICODE]deepmerge[/ICODE] is used all over the web and for good reason!The post <a href="https://davidwalsh.name/javascript-deep-merge" target="_blank">JavaScript Deep Merge</a> appeared first on <a href="https://davidwalsh.name" target="_blank">David Walsh Blog</a>.<a href="https://tkjs.us/dwb" target="_blank"><img src="https://davidwalsh.name/demo/tjs_block-1.svg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></a><a href="https://davidwalsh.name/javascript-deep-merge" target="_blank">Continue reading...</a></blockquote>

[QUOTE="codeguru, post: 55, member: 2"] I recently shared how you can [URL='https://davidwalsh.name/merge-objects']merge object properties with the spread operator[/URL] but this method has one big limitation: the spread operator merge isn’t a “deep” merge, meaning merges are recursive. Moreover nested object properties aren’t merged — the last value specified in the merge replaces the last, even when there are other properties that should exist. const defaultPerson = { name: 'Anon', gender: 'Female', hair: { color: 'brown', cut: 'long' }, eyes: 'blue', family: ['mom', 'dad'] }; const me = { name: 'David Walsh', gender: 'Male', hair: { cut: 'short' }, family: ['wife', 'kids', 'dog'] }; const summary = {...defaultPerson, ...me}; /* { "name":"David Walsh", "gender":"Male", "hair":{ "cut":"short" }, "eyes":"blue", "family":[ "wife", "kids", "dog" ] } */ In the sample above, you’ll notice that the [ICODE]hair[/ICODE] object’s [ICODE]color[/ICODE] is gone instead of merged because the spread operator simply keeps the last provided values, which in this case is [ICODE]me.hair[/ICODE]. The same merge problem applies to arrays — you’ll notice [ICODE]mom[/ICODE] and [ICODE]dad[/ICODE] aren’t merged from the [ICODE]defaultPerson[/ICODE] object’s [ICODE]family[/ICODE] array. Yikes! Deep merging in JavaScript is important, especially with the common practice of “default” or “options” objects with many properties and nested objects that often get merged with instance-specific values. If you’re looking for a utility to help with deep merges, look no further than the tiny [URL='https://github.com/KyleAMathews/deepmerge']deepmerge utility[/URL]! When you use the [ICODE]deepmerge[/ICODE] utility, you can recursively merge any number of objects (including arrays) into one final object. Let’s take a look! const deepmerge = require('deepmerge'); // ... const summary = deepmerge(defaultPerson, me); /* { "name":"David Walsh", "gender":"Male", "hair":{ "color":"brown", "cut":"short" }, "eyes":"blue", "family":[ "mom", "dad", "wife", "kids", "dog" ] } */ [ICODE]deepmerge[/ICODE] can handle much more complicated merges: nested objects and [ICODE]deepmerge.all[/ICODE] to merge more than two objects: const result = deepmerge.all([, { level1: { level2: { name: 'David', parts: ['head', 'shoulders'] } } }, { level1: { level2: { face: 'meh', parts: ['knees', 'toes'] } } }, { level1: { level2: { eyes: 'more meh', parts: ['eyes'] } } }, ]); /* { "level1":{ "level2":{ "name":"David", "parts":[ "head", "shoulders", "knees", "toes", "eyes" ], "face":"meh", "eyes":"more meh" } } } */ [ICODE]deepmerge[/ICODE] is an amazing utility is a relatively small amount of code: function isMergeableObject(val) { var nonNullObject = val && typeof val === 'object' return nonNullObject && Object.prototype.toString.call(val) !== '[object RegExp]' && Object.prototype.toString.call(val) !== '[object Date]' } function emptyTarget(val) { return Array.isArray(val) ? [] : {} } function cloneIfNecessary(value, optionsArgument) { var clone = optionsArgument && optionsArgument.clone === true return (clone && isMergeableObject(value)) ? deepmerge(emptyTarget(value), value, optionsArgument) : value } function defaultArrayMerge(target, source, optionsArgument) { var destination = target.slice() source.forEach(function(e, i) { if (typeof destination[i] === 'undefined') { destination[i] = cloneIfNecessary(e, optionsArgument) } else if (isMergeableObject(e)) { destination[i] = deepmerge(target[i], e, optionsArgument) } else if (target.indexOf(e) === -1) { destination.push(cloneIfNecessary(e, optionsArgument)) } }) return destination } function mergeObject(target, source, optionsArgument) { var destination = {} if (isMergeableObject(target)) { Object.keys(target).forEach(function (key) { destination[key] = cloneIfNecessary(target[key], optionsArgument) }) } Object.keys(source).forEach(function (key) { if (!isMergeableObject(source[key]) || !target[key]) { destination[key] = cloneIfNecessary(source[key], optionsArgument) } else { destination[key] = deepmerge(target[key], source[key], optionsArgument) } }) return destination } function deepmerge(target, source, optionsArgument) { var array = Array.isArray(source); var options = optionsArgument || { arrayMerge: defaultArrayMerge } var arrayMerge = options.arrayMerge || defaultArrayMerge if (array) { return Array.isArray(target) ? arrayMerge(target, source, optionsArgument) : cloneIfNecessary(source, optionsArgument) } else { return mergeObject(target, source, optionsArgument) } } deepmerge.all = function deepmergeAll(array, optionsArgument) { if (!Array.isArray(array) || array.length < 2) { throw new Error('first argument should be an array with at least two elements') } // we are sure there are at least 2 values, so it is safe to have no initial value return array.reduce(function(prev, next) { return deepmerge(prev, next, optionsArgument) }) } Little code with big functionality? That's my favorite type of utility! [ICODE]deepmerge[/ICODE] is used all over the web and for good reason! The post [URL='https://davidwalsh.name/javascript-deep-merge']JavaScript Deep Merge[/URL] appeared first on [URL='https://davidwalsh.name']David Walsh Blog[/URL]. [URL='https://tkjs.us/dwb'][IMG]https://davidwalsh.name/demo/tjs_block-1.svg[/IMG][/URL] [url="https://davidwalsh.name/javascript-deep-merge"]Continue reading...[/url][/i][/i][/i][/i] [/QUOTE]

Verification

Reply to thread

Richest Freecoded User

Most Freecoin