How can I “include” js-code from several js-files into main html-file?

I had a lot of javascript(js)-code in my previous html-file.
I have moved part of the code in another js-files – file1, file2 – see code below.
Before moving I didn’t take care about order of functions declarations. It was OK.
After moving the order began to matter.

I have used defer attribute to force the browser to download all the scripts before they start executing.
But when the main code starts to execute the browser reported an error – function in file1/2 are not defined.

The question is: how can I move a part of js-code into another js-file and not worry about the order of inclusion of additional files and the order of functions declarations in the main code?

html...
 
<script>
     the main js-code - previously all js-code, including file1 and file2, was placed here
</script>
 
<script defer src="file1.js"></script>
<script defer src="file2.js"></script>