Var is global… let is temporary

<!DOCTYPE html>
<style type="text/css">
section>div {
height: 100px;
background-color: red;
float: left;
margin: 3px;
cursor: pointer;
width: 100px;
<script src=""></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');
alert('box clicked: #'+i);
<title>Let Keyword</title>
Click on a Box

A weird return:

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

Output: Undefined, because of the Hoisting

JavaScript Initializations are Not Hoisted

JavaScript only hoists declarations, not initializations.