How does this Angular JS code snippet work?
.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
.
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.