ProProgrammer/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JavaScript Hoisting</title>
</head>
<body>

	<!-- First check -->
	<!-- <script type="text/javascript">
		var myVar = "my value";
		alert(myVar);
	</script> -->

	<!-- Second Check -->
	<!-- <script type="text/javascript">
		var myVar = 'my value';

		// A Self invoking function
		// AKA self executing function
		// this is just a pattern called Immediate pattern
		(function() {
			alert(myVar);
		})();
	</script> -->

	<!-- Third Check -->
	<!-- <script type="text/javascript">
		var myVar = 'my value';

		(function() {
			// var myVar;
			// ^^ This is how it is hoisted up - basically auto declared in the same scope but at the top (just the declaration, not the initialization) when you assign a value to that particular variable somewhere below in the given scope.
			// This is why Good Parts recommends that we declare all our variables at the top of the function - Two reasons:
			// 1. This is what happens anyway behind the scenes
			// 2. You don't have to write 'var' keyword multiple times - just once at the top of the function is enough!
			alert(myVar);

			// We are creating a local variable
			var myVar = 'local value';

			alert(myVar);

			/*
				This first alerts "undefined"
				And then alerts "local value"

				because myVar is hoisted to the top
				See commented line immediately after
				'(function() {' line
			*/
		})();
	</script> -->

	<!-- Fourth Check -->
	<!-- <script type="text/javascript">
		var myVar = 'my value';

		(function() {
			// We are calling newFunction in following line even though we haven't yet created it.
			newFunction();
			/*
				This show the alert "Hello World" in browser because functions are hoisted at the top too, but not in case of function expression.
			*/

			function newFunction() {
				// These type of functions are called function declaration.
				alert("Hello World");
			}
		})();
	</script> -->

	<!-- Fifth Check -->
	<!-- <script type="text/javascript">
		var myVar = 'my value';

		(function() {
			// We are calling newFunction in following line even though we haven't yet created it.
			newFunction();
			/*
				In this case we get nothing in the browser and this is because in function expressions the name gets hoisted (gets declared) to the top of the function and not the implementation.
			*/

			var newFunction = function() {
				// This is the "expression form" of creating functions. (Directly using 'function' keyword as in "Fourth Check" above was "declaration form".)
				alert('Hello World');
			};
		})();
	</script> -->
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>JavaScript Hoisting</title>
	</head>
	<body>

	<!-- First check -->
	<!-- <script type="text/javascript">
	var myVar = "my value";
	alert(myVar);
	</script> -->

	<!-- Second Check -->
	<!-- <script type="text/javascript">
	var myVar = 'my value';

	// A Self invoking function
	// AKA self executing function
	// this is just a pattern called Immediate pattern
	(function() {
	alert(myVar);
	})();
	</script> -->

	<!-- Third Check -->
	<!-- <script type="text/javascript">
	var myVar = 'my value';

	(function() {
	// var myVar;
	// ^^ This is how it is hoisted up - basically auto declared in the same scope but at the top (just the declaration, not the initialization) when you assign a value to that particular variable somewhere below in the given scope.
	// This is why Good Parts recommends that we declare all our variables at the top of the function - Two reasons:
	// 1. This is what happens anyway behind the scenes
	// 2. You don't have to write 'var' keyword multiple times - just once at the top of the function is enough!
	alert(myVar);

	// We are creating a local variable
	var myVar = 'local value';

	alert(myVar);

	/*
	This first alerts "undefined"
	And then alerts "local value"

	because myVar is hoisted to the top
	See commented line immediately after
	'(function() {' line
	*/
	})();
	</script> -->

	<!-- Fourth Check -->
	<!-- <script type="text/javascript">
	var myVar = 'my value';

	(function() {
	// We are calling newFunction in following line even though we haven't yet created it.
	newFunction();
	/*
	This show the alert "Hello World" in browser because functions are hoisted at the top too, but not in case of function expression.
	*/

	function newFunction() {
	// These type of functions are called function declaration.
	alert("Hello World");
	}
	})();
	</script> -->

	<!-- Fifth Check -->
	<!-- <script type="text/javascript">
	var myVar = 'my value';

	(function() {
	// We are calling newFunction in following line even though we haven't yet created it.
	newFunction();
	/*
	In this case we get nothing in the browser and this is because in function expressions the name gets hoisted (gets declared) to the top of the function and not the implementation.
	*/

	var newFunction = function() {
	// This is the "expression form" of creating functions. (Directly using 'function' keyword as in "Fourth Check" above was "declaration form".)
	alert('Hello World');
	};
	})();
	</script> -->
	</body>
	</html>