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

Use-Cases of this tutorial

  • Know the difference between <script type="module"> vs <script> tag.

Whenever a Javascript module needs to be applied to HTML, we need to do it within a <script type="module"> tag. However there are some difference in Javascript execution in this tag vs a normal <script> tag.

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>
    
What is script type=module ?
Loading Comments