74263

Parent function variable access from callback and inline self invoking function

Question:

I believed at first look both self invoking function is same only difference between them is in first one I am passing callback function and then executing by arguments object while in second doing same thing by making function self invoking. Now come to points of accessing parent variable in first one example name is "undefined" while in second one example it's accessible and giving output "Nishant" I am not able to figure out how It's working!!

(function(){ var name = "Nishant"; arguments[0](); })(function(){console.log(name);});

<strong>Output: (an empty string)</strong>

(function(){ var name = "Nishant"; (function(){console.log(name);})() })();

<strong>Output: Nishant</strong>

Answer1:

<blockquote>

I am not able to figure out how It's working!!

</blockquote>

JavaScript has <a href="https://en.wikipedia.org/wiki/Scope_%28computer_science%29#Lexical_scoping" rel="nofollow"><strong>lexical</strong> scope</a>. That means the scope is determined by where the functions are defined inside the source code (unlike <em>dynamic scope</em>, where the scope is determined when the functions are called at runtime).

Lets add some names to your functions so we can reference them more easily:

(function foo(){ var name = "Nishant"; arguments[0](); })(function bar(){console.log(name);});

In this case bar is defined <em>outside</em> of foo and hence cannot have access to the variable defined inside of foo. In fact, at the moment bar is created, the variable name inside foo doesn't even exist yet, since foo hasn't been executed yet.<br /> Maybe it's easier to see when you do not inline the definition:

function bar(){console.log(name);} (function foo(){ var name = "Nishant"; arguments[0](); })(bar);

This might look more familiar, and I bet you wouldn't expect that name inside bar has anything to do with name inside foo, right?

<hr />

In the other case,

(function foo(){ var name = "Nishant"; (function bar(){console.log(name);})() })();

you defined bar <em>inside</em> of foo. name is also inside foo and hence bar has access to that variable (lexical scope + closure).

Answer2:

the "name" in the first version refers the global window.name property*, and in the second example to the private var name through the closure. The window.name property is optional and defaults to an empty string.

If this property wouldn't happen to exist your first example would throw a reference error.

The closure is created at the scope a function was declared, not at the point it got called and in the first example the function was declared inside the global scope, in the second inside the wrapper function scope.

window.name = "NoClosure"; (function(){ var name = "Closure"; arguments[0](); })(function(){console.log(name);}); //>"NoClosure" window.name = "NoClosure"; (function(){ var name = "Closure"; (function(){console.log(name);})(); //>"Closure" })();

If you inspect the of the callback with console.dir(), you can see that it has no closure, here a snippet if you want to test it yourself.

(function wrapper(){ var isPrivate = "A closure could see me"; console.dir(arguments[0]); })(function callback(){});

Here is another experimental setup with 2 closures showing that function declared inside a call to a function are capable of getting a closure, but it will always be the closure of the scope of the function <strong>passing</strong> it, it can not access the scope of the function it was <strong>passed to</strong> as an argument and that later calls it as a callback.

(function outerScope(){ var outerVar = "in outer scope"; (function innerScope(cb){ var innerVar = "in inner scope"; cb(); })(function callback(){ console.log( "outer:"+ typeof outerVar, "inner:"+ typeof innerVar); console.dir(arguments.callee); }) })()

*source <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window.name" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/Window.name</a>

Recommend

  • How to insert new line in PostgreSQL
  • How can I write XML data to a file with Perl?
  • ECMAScript 2017: Why does EscapeSequence include NonEscapeCharacter?
  • how to handle “” in regex in xslt
  • runtime error when linking ffmpeg libraries in qt creator
  • Ruby on Rails App deployed to heroku showing “We're sorry, but something went wrong”
  • Using $compile in a directive triggers AngularJS infinite digest error
  • Updating Dojo provide
  • For loop with if condition on multiple R functions
  • Detecting null parameter in preprocessor macro
  • C# program and C++ DLL compiled for 32-bit system crash on 64-bit system
  • jQuery ready not fired after rails link_to is clicked
  • Get history of file changes from TFS to implement custom “blame”-behaviour of exceptions
  • Why Encoding.ASCII != ASCIIEncoding.Default in C#?
  • Abort upload large uploads after reading headers
  • one Local Olampyad Questions on Informatic in 2011
  • Is it possible to access block's scope in method?
  • Get data from AJAX - How to
  • Adding a button at the bottom of a table view
  • Counter field in MS Access, how to generate?
  • HTML download movie download link
  • Updating server-side rendering client-side
  • Javascript + PHP Encryption with pidCrypt
  • Websockets service method fails during R startup
  • Why winpcap requires both .lib and .dll to run?
  • bootstrap to use multiple ng-app
  • Data Validation Drop Down Box Arrow Disappearing
  • KeystoneJS: Relationships in Admin UI not updating
  • Acquiring multiple attributes from .xml file in c#
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • How to set the response of a form post action to a iframe source?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • How can I remove ASP.NET Designer.cs files?
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • unknown Exception android
  • Android Heatmap on canvas or ImageView
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF