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.
```

<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.
```

<script src="site.js" defer></script>
```