JSFiddle - React, Tailwind, and code Playground

JavaScript

var sportsA ={
	"sports": {
	    "basketball": "kobe",
	    "football": "ronaldo"
	}
};

var sportsB ={
	"sports": {
	    "basketball": "",
	    "swimming": {
	    },
	    "football": "",
	    "running": "",
	    "highJump": ""
	},
	"calendar": ["21", "25", "30"]
};

function merge(sportsA, sportsB) {
    for( var p in sportsB )
        if( sportsA.hasOwnProperty(p) )
            sportsA[p] = typeof sportsB[p] === 'object' ? merge(sportsA[p], sportsB[p]) : sportsB[p];

    return sportsA;
}

merge(sportsA, sportsB );
console.log("unexpected result" + sportsA ); 
console.log( sportsA ); 


//expected
/*
{
	"sports": {
	    "basketball": "kobe",
	    "swimming": {
	    },
	    "football": "ronaldo",
	    "running": "",
	    "highJump": ""
	},
	"calendar": ["21", "25", "30"]
}
*/


//correctly working
/*
var sportsA ={
	"sports": {
	    "basketball": "",
	    "swimming": {
	    },
	    "football": "",
	    "running": "",
	    "highJump": ""
	},
	"calendar": ["21", "25", "30"]
};

var sportsB ={
	"sports": {
	    "basketball": "kobe",
	    "football": "ronaldo"
	}
};

function merge(sportsA, sportsB) {
    for( var p in sportsB )
        if( sportsA.hasOwnProperty(p) )
            sportsA[p] = typeof sportsB[p] === 'object' ? merge(sportsA[p], sportsB[p]) : sportsB[p];

    return sportsA;
}

merge(sportsA, sportsB );
console.log("expected result" + sportsA ); 
console.log( sportsA ); 
*/