reading javascript variables within enqueued JS files in wordpress php

I have main.js file which is like this. I would like to read departDateOneWay in sample.js

(function ($) {
    "use strict";
    var $window = $(window);

    $window.on('load', function () {
        var $document = $(document);
     ...
     ...

          function(start, end) {
       
          departDateOneWay = start.format('YYYY/MM/DD');
          console.log("onewaydepart:::"+departDateOneWay);
          var testVar ='<?php echo $departDateOneWay;?>';
       }
       
     ...
     ...

    });

})(jQuery);

In sample.js file , which is called in an onclick event, I am expecting to see the testVar but I am not sure if that is the correct way as I get testVar is not defined

function test(){
	console.log("departdate:"+testVar);
}

I am enqueuing both sample.js and main.js like this in functions.php

function travel_register_scripts() {
wp_enqueue_script('main', get_template_directory_uri().'/assets/js/main.js', array(), '1.0', false);
   wp_enqueue_script('sample', get_template_directory_uri().'/assets/js/sample.js', array(), '1.0', false);
}
add_action('wp_enqueue_scripts', 'travel_register_scripts');    

I also tried wrapping the whole main.js file in php this way so I could read departDateOneWay in sample.js

<?php
function ti_custom_javascript() {
?>
<script type='text/javascript>
(function ($) {
"use strict";
var $window = $(window);
...
function(start, end) {
departDateOneWay = start.format('YYYY/MM/DD');
console.log("onewaydepart:::"+departDateOneWay);
var testVar ='<?php echo $departDateOneWay; ?>';
}
...
</script>
<?php
}

add_action('wp_head', 'ti_custom_javascript');
?>

but as soon as I enqueue the newly created main.php (from main.js) instead of main.js , site does not load

Basically I would like to read javascript variables from one JS file to another where all JS files are enqueued using wp_enqueue_scripts . Can someone please help

The issue is the scope of the departDateOneWay variable: it's localized to the callback function for window.load.

In main.js, set the departDateOneWay value as a property on the window object, and then access in sample.js by doing window.departDateOneWay.

main.js

(function ($) {
    "use strict";
    var $window = $(window);

    $window.on('load', function () {
        var $document = $(document);
     ...
     ...

          function(start, end) {
       
          window.departDateOneWay = start.format('YYYY/MM/DD');
          console.log("onewaydepart:::"+window.departDateOneWay);
       }
       
     ...
     ...

    });

})(jQuery);

sample.js

function test(){
    console.log("departdate:"+window.departDateOneWay);
}