ilustrating the diff in hoisting behavior that surprises me

1.md

Compare the apparent hoisting behavior between these two snippets to see why the JS scoping/hoisting quiz I posted surprises me.

2.js

var a = 2;

a(); // TypeError

function a() {
  console.log("yay");
}



// **********************
// Hoists as:

function a() {
  console.log("yay");
}
var a;
a = 2;
a(); // TypeError

3.js

(function(a) {
  a(); // yay
  function a() {
    console.log("yay");
  }
})(2);



// **********************
// Contents of the IIFE sorta "hoists" as:

var a;
a = 2;
function a() {
  console.log("yay");
}
a(); // yay

4.js

// For further color on this, consider:

(function(a){
  var a;
  console.log(a);
})(2); // 2

// There, clearly, the `a` param and the `var a` local variable behave
// hoisting wise as if they're in the same scope and the `var a` is
// redundant and skipped.