Differences between 〈script type=module〉and〈script〉

Module Script Execute in Strict Mode

• The <script type="module"> tag executes Javascript in strict mode.

  <script type="module">
  	// reference error : x is undeclared variable
  	x = "The infamous x";
  </script>
  

• A normal <script> tag is executed in non-strict mode by default. If it needs to be executed in strict mode, we need to explicitly mention use strict.

  <script>
  	// variable undeclared, but no error
  	a = "Some Var";
  
  	// "Some Var"
  	console.log(a);
  </script>
  

Module Script has its Own Scope

• The scope of variables, functions etc in a <script type="module"> tag is limited to that block.

  <script type="module">
  	// this is available only within this block
  	function myFunc() {
  		console.log("Will not be accessible from anywhere else");
  	}
  </script>
  
  <script type="module">
  	// reference error : myFunc is not defined
  	myFunc();
  </script>
  

• In a normal <script> tag variables, functions etc have global scope. These are available even inside module script tags.

  <script>
  	function myFunc() {
  		console.log("Will be accessible from anywhere");
  	}
  </script>
  
  <script>
  	// accessible
  	myFunc();
  </script>
  
  <script type="module">
  	// accessible
  	myFunc();
  </script>
  

Module Script can Import other Javascript Modules

• Other Javascript modules can be imported in <script type="module"> tag.

  <script type="module">
  	import {someFunc, someVar} from './js/myModule.js'
  
  	// code to use the module
  </script>
  

• In a normal <script> tag, modules cannot be imported. import statement will throw a syntax error.

  <script type="text/javascript">
  	// syntax error
  	import {someFunc, someVar} from './js/myModule.js'
  </script>
  

Module Script has this as Undefined

• The value of this at the top-level in a module is undefined.

  <script type="module">
  	//undefined
  	console.log(this);
  </script>
  

• In a regular <script> tag, value of this is the window object (at top-level).

  <script>
  	// window
  	console.log(this);
  </script>
  

Inline Module Script can have async Attribute

• It is possible to use the async attribute in <script type="module"> having inline code also.

  <script type="module" async>
  	import {someFunc, someVar} from './js/myModule.js'
  
  	// some code
  </script>
  

• In normal <script> tag one can use async attribute only with an external Javascript file.

Module Script is Always Deferred

• There is no need to use the defer attribute in <script type="module"> tag as modules are automatically deferred.

  <!-- automatically deferred -->
  <script type="module" src="mod.js"></script>
  

• In normal <script> tag, we need to explicitly mention the defer attribute in the tag if we need it to get deferred.

  <!-- explicitly needs defer attribute -->
  <script src="site.js" defer></script>