Var is global… let is temporary

<!DOCTYPE html>
<html>

<head>
	<style type="text/css">
		section>div {
			height: 100px;
			background-color: red;
			float: left;
			margin: 3px;
			cursor: pointer;
			width: 100px;
		}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
	<script type="text/babel">

	/*
	Var is global... let is temporary
	this wont change the value of var... and everytime a square is clicked 45 will appear
	for (var i = 0; i < 45; i++) {
	*/
		for (let i = 0; i < 45; i++) {
			var div = document.createElement('div');
			div.onclick=function(){
				alert('box clicked: #'+i);
			}
			document.getElementsByTagName('section')[0].appendChild(div);
		}
	</script>
	<title>Let Keyword</title>
</head>

<body>
	<header>
		<h1>
			Click on a Box
		</h1>
		<section>

		</section>
	</header>
</body>

</html>

A weird return:

function getClothing(isCold) {
  if (isCold) {
    var freezing = 'Grab a jacket!';
  } else {
    var hot = 'It’s a shorts kind of day.';
    console.log(freezing);
  }
}

Output: Undefined, because of the Hoisting

JavaScript Initializations are Not Hoisted

JavaScript only hoists declarations, not initializations.

Sources:

https://www.udacity.com/course/es6-javascript-improved–ud356