Variable vs. function hoisting

function-declaration.js

// Both, function declaration and function body are hoisted to top of scope. 

// Outside of scope, hence ReferenceError
console.log(foo); // ReferenceError: foo is not defined

(function () {
  // Declaration and function body got hoisted to top of scope
  console.log(foo); // [Function: foo]
  console.log(foo()); // 'bar'

  function foo() { return 'bar'; };
})();

variable-declaration.js

// Variable declarations are hoisted to top of scope. 
// Variable assignments are not. 

// Outside of scope, hence ReferenceError
console.log(foo); // ReferenceError: foo is not defined

(function () {
  // Variable declaration got hoisted to top of scope, but the variable assignment did not, hence undefined
  console.log(foo); // undefined
  
  var foo = 'bar';
  
  // After variable assignment
  console.log(foo); // 'bar'
})();

variable-declaration2.js

// Assigning a variable with a function is exactly the same

// Outside of scope, hence ReferenceError
console.log(foo); // ReferenceError: foo is not defined

(function () {
  // Variable declaration got hoisted to top of scope, but the variable assignment did not, hence undefined
  console.log(foo); // undefined
  
  // Attempting to call undefined at this point will produce a TypeError
  foo(); // TypeError: undefined is not a function
  
  var foo = function () { return 'bar'; };
  
  // After variable assignment
  console.log(foo); // [Function: foo]
  console.log(foo()); // 'bar'
})();