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
