From 368e606a34e1736a6ed9acaffd2c49235c281dea Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Sun, 6 May 2018 15:03:14 -0400 Subject: [PATCH] hoisting --- modular_js/hoisting.md | 77 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git a/modular_js/hoisting.md b/modular_js/hoisting.md index e69de29..9e6524d 100644 --- a/modular_js/hoisting.md +++ b/modular_js/hoisting.md @@ -0,0 +1,77 @@ +# Hoisting + +## IIFE + +Normally, variable declarations, are "hoisted" up to the top of whatever function they are declared in (or global if no function exists). This can lead to some weird moments: + +```JavaScript +var a = 2; + +if(true){ + var a = 4; +} + +console.log(a); //in many programming languages, this would be 2 +``` + +and a famous interview question: + +```JavaScript +for(var i=0; i<5; i++){ + setTimeout(function(){ + console.log(i) //you'd expect 0,1,2,3,4 + },500 * i); +} +``` + +IIFE - Immediately Invoked Function Expression - often used to create a block of scope. This is not an ES6 thing, but rather an example of an old way to get block scoping. + +```JavaScript +var a = 2; + +(function IIFE(){ + var a = 4; + console.log ('Inside the IFFE, the value of a is', a ); //"Inside the IFFE, the value of a is 4" +})(); + +console.log ( 'Outside the IFFE, the value of a is', a ); //"Outside the IFFE, the value of a is 2" +``` + +And now the loop with setTimeout: + +```JavaScript +for(var i=0; i<5; i++){ + (function(i){ + setTimeout(function(){ + console.log(i) + },500 * i); + })(i) +} +``` + +## Block Scoping with let + +A new way to get block level scoping is with the keyword let, and the use of `{}` as in any `{}`, not just tied to a function! Note: `let` is NOT meant to completely replace `var`! + +```JavaScript +var a = 2 + +{ + let a = 4 + console.log( 'the value of b inside the `{}` is', a); //"block level scope" +} + +console.log ('the value of b outside of the `{}` is', a) //"global scope" +``` + +And now the loop with setTimeout: + +```JavaScript +for(let i=0; i<5; i++){ + setTimeout(function(){ + console.log(i) //you'd expect 0,1,2,3,4 + },500 * i); +} + +console.log(i); //notice i is not defined outside of the loop +```