title: JS Recursive object assign
body: <p>I learned that when using Object.assign() it extends only the top level object. How can I deeply extend the object? For example, let's say I have the following source object:</p>
  
  <pre><code>const source = {
    id: 1,
    otherKey: {},
    params: {
      page: {
        a: 1,
        b: {}
      },
      data: {
        b: 1
      }
    }
  }
  </code></pre>
  
  <p>And I am using <code>Object.assign()</code> like this:</p>
  
  <pre><code>Object.assign({}, source, {
    params: {
      page: {
        a: 2
      }
    }
  }
  </code></pre>
  
  <p>The result will be:</p>
  
  <pre><code>{
        id: 1,
        otherKey: {},
        params: {
          page: {
            a: 2
          }
        }
  }
  </code></pre>
  
  <p>How can I preserve the params.data key and the params.page.b key in a  shallow clone way. </p>
  
  <pre><code>oldObject.params.data === newObject.params.data  // true
  oldObject.params.page === newObject.params.page  // false
  oldObject.params.page.b === newObject.params.page.b // true
  </code></pre>
  
  <p><strong>Note:</strong> This question is not the same as <a href="https://stackoverflow.com/questions/27936772/how-to-deep-merge-instead-of-shallow-merge">How to deep merge instead of shallow merge</a>. The answers there does not give the expected results. </p>
  
  <p>Check this <a href="http://jsbin.com/wufalikovo/edit?js,output" rel="noreferrer">bin</a> that takes an answer from the above link. </p>