javascript – What will the code below output to the console and what is the reason?

Here’s the console output:

outer func:  this.foo = bar
outer func:  self.foo = bar
inner func:  this.foo = undefined
inner func:  self.foo = bar

This is a demonstration of a Javascript function closure, which is a very common question for coding interviews. The outer function has access to the object scope, which is referenced by this and assigned to the variable self. So both calls to access the property foo work as expected,

Then, an inner function is defined inside this function. This inner function does not have access to the object scope, but does have access to the scope of it’s parent function, where the self variable was defined. This is the closure part of the closure so to speak. So when we try and access self.foo from the inner function we can access it – as it’s been defined in the same lexical scope as the calling function. this.foo on the other hand exists in a different scope so cannot be accessed.

Output will be:

outer func:  this.foo = bar
outer func:  self.foo = bar
inner func:  this.foo = undefined
inner func:  self.foo = bar

Because IIFE(Immediately Invoked Function Expression) will be called in context of global object (window in browsers) so “this” will be global object inside IIFE and when you try to access “this.foo” inside IIFE it will return undefined because there is no property named foo in global object.

var xyz = "Hi There"
var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log("outer func:  this.foo = " + this.foo);
        console.log("outer func:  self.foo = " + self.foo);
        (function() {
            console.log("inner func:  this.foo = " + this.foo);
            console.log("inner func:  this.xyz = " + this.xyz);
            console.log("inner func:  self.foo = " + self.foo);
            console.log("inner func:  this = " + this);
        }());
    }
};
myObject.func();

The output for above code will be :

outer func:  this.foo = bar 
outer func:  self.foo = bar 
inner func:  this.foo = undefined 
inner func:  this.xyz = Hi There 
inner func:  self.foo = bar
inner func:  this = [object Window]

You can learn more about IIFE from https://www.kirupa.com/html5/immediately_invoked_function_expressions_iife.htm

Answer:

"outer func:  this.foo = bar"
"outer func:  self.foo = bar"
"inner func:  this.foo = undefined"
"inner func:  self.foo = bar"

Reason: This references the object that is executing the current function.

• If that function is a regular function which means it’s not part of
  an object This reference’s the global object which is the window
  object in browsers and global in node

• If that function is a part of an object we call that function, a
  method. So if that function is a method in an object this
  references that object itself.

Console logs:

outer func:  this.foo = bar
outer func:  self.foo = bar
inner func:  this.foo = undefined
inner func:  self.foo = bar

Because in javascript this refers to the caller’s context:

In the call of the func function, this (the context) refers to the caller object, hence the function has visibility of the caller fields and can access them trough this.

In the second function call, this will refer to the global object(window in browsers), (the function func) that does not have a field called foo, hence it will evaluate as undefined. Instead, it has access on self(due to closure), that’s why self.foo is accessible.