Javascript classic script vs module scope

Question

Javascript classic script vs module scope

504 Views Asked by teaoverflow At 01 October 2020 at 12:01

I have some strange behavior in my javascript front end code so I am asking a going back to basics question. First I will setup some examples.

script1.js

var script1Var = "script variable";
function script1Test(){
  console.log("hello from script1 test");
}

script2.js

function script2Test(){
  console.log("hello from script2 test");
}

module1.js

export default function module1Test(){
  console.log("hello from module1 test");
}

module2.js

export default function module2Test(){
  console.log("hello from module2 test");
}

test_page1.html

<html>
 <head>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
 </head>
</html>

test_page2.html

<html>
 <head>
  <script type="module" src="module1.js"></script>
  <script type="module" src="module2.js"></script>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
 </head>
</html>

Here are my questions:

During runtime because of how test_page1.html is laid out I presume that script2.js can call functions in script1.js without the need of any imports, but can script1.js call functions in script2.js? Basically does order matter? I am quite positive that it does.
In test_page2.html are functions from module1.js and module2.js visible to script1.js and script2.js? If not, how can they be made visible to them?
In test_page2.html are functions from module1.js visible to module2.js without the use of imports?

Basically my questions boil down to, how can a classic script (does not have exports in it) be used in modules? And how can modules be used in classic scripts. Converting the classic script into a module is not an option here since there is a lot of code that depends on using it as a classic script. And the same for modules, they can not be converted to classic scripts since there is other code using them as modules.

thank you for your help

Original Q&A

There are 1 best solutions below

**Felix Kling** · Answer 1 · 2020-10-01T12:15:17.207000

[...] but can script1.js call functions in script2.js? Basically does order matter? I am quite positive that it does.

It depends. script1.js cannot call functions from script2.js while its being evaluated. I.e. something like

// script1.js
script2Test();

wouldn't work.

But it can call those functions as long as it is after script2.js loaded. For example in response to an event:

// script1.js
document.body.onclick = function() {
  script2Test();
}

In test_page2.html are functions from module1.js and module2.js visible to script1.js and script2.js?

No. Each module creates a separate scope. Exports can only be accessed by importing them.

If not, how can they be made visible to them?

The modules would have to explicitly create global variables, e.g. by assigning a property to window:

window.module1Test = module1Test;

But also here, such a function would only be callable after the module loaded/was evaluated.

The better solution (at least I believe this works in "normal" scripts) would be to import the module dynamically, via the import function:

import('./module1Test.js').then(exports => console.log(exports));

In test_page2.html are functions from module1.js visible to module2.js without the use of imports?

No. As I said, every module creates its own scope.

Javascript classic script vs module scope

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JAVASCRIPT-SCOPE

Trending Questions

Popular # Hahtags

Popular Questions