Classic scripts vs. module scripts in JavaScript

Question

I was going through the WHATWG specifications for async and defer attributes for the <script> tag, when I saw this statement:

Classic scripts may specify defer or async; module scripts may specify async.

I went through the WHATWG definitions for classic and module scripts, but I didn't really get much clarity. In simple terms, what are the differences between classic and module scripts in JavaScript?

Tia

Answer 1

A classic script is just a standard JavaScript script as you know it. A module script is one that contains an ES6 module, i.e. it uses (or: can use) import and export declarations.

From §8.1.3.8 Integration with the JavaScript module system:

The JavaScript specification defines a syntax for modules, as well as some host-agnostic parts of their processing model. This specification defines the rest of their processing model: how the module system is bootstrapped, via the script element with type attribute set to "module", and how modules are fetched, resolved, and executed. [JAVASCRIPT]

Note: Although the JavaScript specification speaks in terms of "scripts" versus "modules", in general this specification speaks in terms of classic scripts versus module scripts, since both of them use the script element.

Also have a look at https://blog.whatwg.org/js-modules.

Submersed

This is obviously correct, but it supplies so little information that I still feel unsatisfied. The classic scripts link the OP provided is useless documentation (which is likely why there was confusion). This answer "simply" gives the underlying mechanics. But my question -- and presumably others' -- is how to use it? For instance, in other languages, a module is anything you (can) import and a script is anything you (can) execute. But the definition is typically a bit "fuzzy". In new JS it seems they want more rigor. But what is the best practice?? – Gramophone

Actually, presuming this documentation is still accurate, it was far more helpful. – Gramophone

@MikeWilliamson JS does use the term "module" in a very fuzzy meaning as well ("some piece of code that creates an object to make things available to the public"), but in the question and therefore this answer we specifically refer to ES6 module syntax. – Submersed

@MikeWilliamson I just presumed everyone knew "ES6 modules" by now, that's why I didn't include a link. Edited. – Submersed

Answer 2

Here are the differences I have noted from various articles. If you want more details, read a complete article on the internet:

1. Modules are singleton. They will be loaded and executed only once.
2. Modules can use import and export.
3. Modules are always executed in strict mode.
4. All objects (class, const, function, let, or var) are private unless explicitly exported.
5. The value of this is undefined at the outer scope (not window).
6. Modules are loaded asynchronously.
7. Modules are loaded using CORS. see Access-Control-Allow-Origin: *.
8. Modules don't send cookies and authentication info by default. See crossorigin="use-credentials".
9. Imports are resolved statically at load time rather than dynamically at runtime.
10. HTML comments are not allowed.

Irreplaceable