Why does importing a script as module change its variable scope?

Question

I couldn't find much documentation explaining this. In JS:

// fileA.js
const varA = 1

// fileB.js
console.log(varA)

In HTML, if it looks like:

<script defer src='./fileA.js'></script>
<script defer src='./fileB.js'></script>

Then it will print '1', but if in HTML, the script tag is changed to

<script defer type='module' src='./fileA.js'></script>
<script defer src='./fileB.js'></script>

Then varA will not be found. Why is this? The workaround is to use window.varA but not sure the logic behind this phenomenon.

Thanks!