jquery split variable values in array

jquery split variable values in array

I have a div with an ID of '#Main" and I am trying to change CSS classes for this div with a collection of variables. using + ' ' + seems to add lots of empty space between classes therefore I was trying to use the split property but so far I am unable to do so. It will be very kind of you friends to kindly solve my issue. My code is as below;

jQuery
    var MainClasses ="";
    var BackgroundColor="";
    var BackgroundPattern ="";
    var TxtColor="";

// Some code & conditions here which is assigning CSS classes to these variables
  
    BackgroundColor = " Background-Red";
    BackgroundPattern =" Pattern-2";
    TxtColor = " Txt-Color-Green";
  
    upDateTheme();
 
function upDateTheme() {
        $('#Main').removeClass();
        var ClassColletion = 'BackgroundColor, BackgroundPattern TxtColor';
        MainClasses = ClassColletion.split(' ');
        $( '#Main' ).addClass(MainClasses );
    }


Expected HTML Result
<div id="Main" class="Background-Red Pattern-2 Txt-Color-Green"> Some Content here </div>