title: How to recursively merge 2 javascript objects?
body: <p>I have 2 objects that I need to merge and keep all properties in tact, tried with jQuery $.extend but I cant get it to work . I tried all posts with how to merge javascript objects but simply cant get this to work. </p>
  
  <pre><code>var thz_icon_source = {"Spinners":["spinnericon1","spinnericon2"],"Awesome":["awesomeicon1","awesomeicon2"]};
  var fa_icon_source = {"Spinners":["faspinner1","faspinner2"],"Awesome":["faawesome1","faawesome2"]};
  var new_source ={};
  $.extend(new_source,fa_icon_source,thz_icon_source);
  
  console.log(thz_icon_source);
  console.log(fa_icon_source);
  console.log(new_source);
  </code></pre>
  
  <p>desired output should be like</p>
  
  <pre><code>{
  "Spinners":["faspinner1","faspinner2","spinnericon1","spinnericon2"],
  "Awesome":["faawesome1","faawesome2","awesomeicon1","awesomeicon2"]
  }
  </code></pre>
  
  <p><strong>This post  <a href="https://stackoverflow.com/questions/10384845">Merge two json/javascript arrays in to one array</a> has a simple object mine is not same as that one.</strong> </p>