JSFiddle - React, Tailwind, and code Playground

HTML

<div ></div>

JavaScript

function isDOMNode(v) {
  if ( v===null ) return false;
  if ( typeof v!=='object' ) return false;
  if ( !('nodeName' in v) ) return false; 
  var nn = v.nodeName;
  try {
    v.nodeName = 'is readonly?';
  } catch (e) {
    return true;
  }
  if ( v.nodeName===nn ) return true;
  v.nodeName = nn;
  return false;
}

function mergeRecursive() {
  // _mergeRecursive does the actual job with two arguments.
  var _mergeRecursive = function (dst, src) {
    if ( isDOMNode(src) || typeof src!=='object' || src===null) {
      return dst; 
    }
    
      
    
    for ( var p in src ) {
        $("div").append("<br>arr? "+$.isArray(src[p]))
            if ($.isArray(src[p])){
            $.merge(dst[p],src[p]);
continue;        
            }
      if( !src.hasOwnProperty(p) ) continue;
      if ( src[p]===undefined ) continue;
      if ( typeof src[p]!=='object' || src[p]===null) {
        dst[p] = src[p];
      } else if ( typeof dst[p]!=='object' || dst[p]===null ) {
        dst[p] = _mergeRecursive(src[p].constructor===Array ? [] : {}, src[p]); 
      } else {              
        _mergeRecursive(dst[p], src[p]);
      }
    }
    return dst;
  }

  // Loop through arguments and merge them into the first argument. 
  var out = arguments[0];
  if ( typeof out!=='object' || out===null) return out;
  for ( var i=1, il=arguments.length; i<il; i++ ) {
    _mergeRecursive(out, arguments[i]);
  }
  return out;
}

var sourceObj = {
    propterty:"change Me",
    anArray:[
        {name:"first"},
        {name:"second"}
    ]},
    configJSON = '{"propterty":"New Val","anArray":[{"name":"second","prop":"added"},{"name":"third"}]}',
        x = JSON.parse(configJSON);
// before
$("div").append(JSON.stringify(sourceObj)) 
    
mergeRecursive(sourceObj,x);
//after
$("div").append("<br>"+JSON.stringify(sourceObj))