I'm trying to fire some frontend project with several JS script files attached to have page logic working properly. At first all links to the scripts were placed at the end of my body section and it was working OK. But after I decided to use DOMContentLoaded events listener so that I could place links to the scripts in my header section. However right after that some of my scripts stopped to work. After quick checking it appeared that the culprit was that some scripts share some variables that was defined as global so all scripts had access to it, but right then these variables got in the DOMContentLoaded callback code blocks {...}, obviously other scripts lost access to all of them.

Of course, I can go backward now and put all scripts links at the end of the body or use defer or async attributes, but I'm just wonder if there a way to still use DOMContentLoaded but nevertheless have variables enclosed in DOMContentLoaded callback got available globally and shared among all page scripts ?