title: Deep Merge using Lodash
body: <p>I have two arrays of objects that contain addresses that have a label and an object for the actual address:</p>
  
  <pre><code>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' }
    }
  ];
  </code></pre>
  
  <p>Now I want to merge these arrays by <code>label</code> and compare the individual properties of the addresses and merge only the properties from the new address that are actually present. So the result should look like this:</p>
  
  <pre><code>var result = [
    {
      label: 'home',
      address: { city: 'London (Central)', zipCode: '12345', country: 'UK' }
    },
    {
      label: 'work',
      address: { city: 'New York', zipCode: '54321' }
    },
    {
      label: 'spain',
      address: { city: 'Madrid', zipCode: '55555' }
    }
  ]
  </code></pre>
  
  <p><strong>How can I do this using <a href="https://lodash.com/" rel="noreferrer">lodash</a>?</strong> I tried a combination of <code>unionBy()</code> and <code>merge()</code>. With unionBy() I was able to compare and join the arrays by label, but this always replaces the whole object. I can sure merge the addresses but this doesn't happen by label then.</p>