You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.7 KiB
78 lines
1.7 KiB
# 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
|
|
```
|