How does this Angular JS code snippet work?

Question

Why does following snippet work in Angular JS?

var app = angular.module('store',[]); 



(function(){
    app.controller('StoreController',function(){
        this.blabla = student;
    });
})();

var student = 
{
    name:"Abc Def",
    rollNumber:12,
    isBrilliant: true,
    isMale:false,
    isFemale: false,
    istest:true
};

Even though student comes after the function where it's being used and student is not hoisted still why does the above function work?

But in contrast to the above example, this one:

(function(){
        console.log("Name is :"+student);
    })();

    var student = {
        name:"xyz"
    };

Shows student as undefined means it wasn't hoisted.

Answer 1

.controller registers a controller function but doesn't execute it right away - it enqueues it for a later phase. Then, student variable is assigned an object.

That controller function, however, is a closure over student variable - in other words, it has access to it at run-time. Read more about closures. And so, when it does finally execute, student variable is defined.

In contrast, the second example's console.log, whether it is enclosed in immediately-invoked function expression or not, executes before student variable is assigned, and so it is undefined.

Answer 2

There is a subtle difference between the first example and the second example. In the first example, there are two function blocks, in the second, there is only one.

Both examples are invoked immediately, but where the second function tries immediately to access the outer variable, which hasn't been defined yet, the first merely executes a function to register the controller (and thus, does not execute the contents of the controller function).

By the time the angular framework invokes the controller's constructor function, the outer variable has been defined, and is part of the closure environment.