Compare Revisions

Functions and function scope

Revision 15469:

Revision 15469 by ben.mcintyre on

Revision 15470:

Revision 15470 by Ole Laursen on

Title:
Functions and function scope
Functions and function scope
Slug:
Talk:JavaScript/Reference/Functions_and_function_scope
Talk:JavaScript/Reference/Functions_and_function_scope
Content:

Revision 15469
Revision 15470
n14      Since this page is getting large very fast, I'm planning onn14      Since this page is getting large very fast, I'm planning on
> creating a category devoted to <a href="/En/Core_JavaScript_1.5_> creating a category devoted to <a href="/en/JavaScript/Reference
>Reference/Functions_and_function_scope" title="En/Core_JavaScript>/Functions_and_function_scope" title="En/Core_JavaScript_1.5_Refe
>_1.5_Reference/Functions_and_function_scope">Core JavaScript 1.5 >rence/Functions_and_function_scope">Core JavaScript 1.5 Reference
>Reference:Functions</a> that will have the following subcategorie>:Functions</a> that will have the following subcategories:
>s: 
n20        <a href="/En/Core_JavaScript_1.5_Reference/Functions_and_n20        <a href="/en/JavaScript/Reference/Functions_and_function_
>function_scope/arguments" title="En/Core_JavaScript_1.5_Reference>scope/arguments" title="En/Core_JavaScript_1.5_Reference/Function
>/Functions_and_function_scope/arguments">Core JavaScript 1.5 Refe>s_and_function_scope/arguments">Core JavaScript 1.5 Reference:Fun
>rence:Functions:arguments</a>>ctions:arguments</a>
n31* ways to create functions (links to <a href="/en/Core_JavaScriptn31* ways to create functions (links to <a href="/en/JavaScript/Refe
>_1.5_Reference/Global_Objects/Function" title="en/Core_JavaScript>rence/Global_Objects/Function" title="en/Core_JavaScript_1.5_Refe
>_1.5_Reference/Global_Objects/Function">Core_JavaScript_1.5_Refer>rence/Global_Objects/Function">Core_JavaScript_1.5_Reference:Obje
>ence:Objects:Function</a>, <a href="/en/Core_JavaScript_1.5_Refer>cts:Function</a>, <a href="/en/JavaScript/Reference/Statements/fu
>ence/Statements/function" title="en/Core_JavaScript_1.5_Reference>nction" title="en/Core_JavaScript_1.5_Reference/Statements/functi
>/Statements/function">Core_JavaScript_1.5_Reference:Statements:fu>on">Core_JavaScript_1.5_Reference:Statements:function</a>, and <a
>nction</a>, and <a href="/en/Core_JavaScript_1.5_Reference/Operat> href="/en/JavaScript/Reference/Operators/Special/function" title
>ors/Special_Operators/function_Operator" title="en/Core_JavaScrip>="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/fu
>t_1.5_Reference/Operators/Special_Operators/function_Operator">Co>nction_Operator">Core_JavaScript_1.5_Reference:Operators:Special_
>re_JavaScript_1.5_Reference:Operators:Special_Operators:function_>Operators:function_Operator</a>)
>Operator</a>) 
n40      Because of name conflicts and for consistency, moving objecn40      Because of name conflicts and for consistency, moving objec
>ts page to <a href="/en/Core_JavaScript_1.5_Reference/Global_Obje>ts page to <a href="/En/Core_JavaScript_1.5_Reference/Global_Obje
>cts" title="en/Core_JavaScript_1.5_Reference/Global_Objects">Core>cts" title="en/Core_JavaScript_1.5_Reference/Global_Objects">Core
>_JavaScript_1.5_Reference:Global Objects</a>, top-level functions>_JavaScript_1.5_Reference:Global Objects</a>, top-level functions
> to <a href="/en/Core_JavaScript_1.5_Reference/Global_Functions" > to <a href="/en/JavaScript/Reference/Global_Objects" title="en/C
>title="en/Core_JavaScript_1.5_Reference/Global_Functions">Core_Ja>ore_JavaScript_1.5_Reference/Global_Functions">Core_JavaScript_1.
>vaScript_1.5_Reference:Global Functions</a>, and top-level proper>5_Reference:Global Functions</a>, and top-level properties to <a 
>ties to <a href="/en/Core_JavaScript_1.5_Reference/Global_Propert>href="/En/Core_JavaScript_1.5_Reference/Global_Properties" title=
>ies" title="en/Core_JavaScript_1.5_Reference/Global_Properties">C>"en/Core_JavaScript_1.5_Reference/Global_Properties">Core_JavaScr
>ore_JavaScript_1.5_Reference:Global Properties</a>.>ipt_1.5_Reference:Global Properties</a>.
n128        Yes, but I don't know where it should be put. TBH, I don'n128        Yes, but I don't know where it should be put. TBH, I don'
>t think any of these function specifics should even be under the >t think any of these function specifics should even be under the 
>Function object. It should be put in a totally new chapter. Same >Function object. It should be put in a totally new chapter. Same 
>thing applies for the <a href="/en/Core_JavaScript_1.5_Reference/>thing applies for the <a href="/en/JavaScript/Reference/Operators
>Operators/Member_Operators" title="en/Core_JavaScript_1.5_Referen>/Member_Operators" title="en/Core_JavaScript_1.5_Reference/Operat
>ce/Operators/Member_Operators">method binding</a> section. --<a h>ors/Member_Operators">method binding</a> section. --<a href="/Use
>ref="/User:Maian" title="User:Maian">Maian</a> 06:57, 6 September>r:Maian" title="User:Maian">Maian</a> 06:57, 6 September 2005 (PD
> 2005 (PDT)>T)
n223      <a class=" external" href="http://developer.mozilla.org/en/n223      http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Re
>docs/Core_JavaScript_1.5_Reference:Functions#Conditionally_defini>ference:Functions#Conditionally_defining_a_function
>ng_a_function" rel="freelink">http://developer.mozilla.org/en/doc 
>s...ing_a_function</a> 
n366      <dd>n366      <dd style="position: static; z-index: auto;">
t385    <p>t385    <p style="margin-left: 40px;">
386      &lt;snip&gt;386      I agree with the criticism (came here to write the same thi
 >ng myself) and have now deleted that section, replacing it with a
 > warning that closures keep objects alive in a sometimes less obv
 >ious way. The closure-related bug in IE you were thinking of is p
 >robably the problem that old IE has trouble breaking cycles betwe
 >en the DOM and Javascript objects. I don't think it has anything 
 >to do with closures per se, although that's an easy way of genera
 >ting them. -- Ole Laursen, 9 Sep 2011
387    </p>
388    <p>
389      &nbsp;
390    </p>
391    <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 
>1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; pa 
>dding-bottom: 0px; padding-left: 0px;"> 
392      Since the inner function forms a closure, you can call the 
>outer function and specify arguments for both the outer and inner 
> function: 
393    </p>
394    <pre class="eval" style="margin-top: 0px; margin-right: 0px; 
>margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; paddin 
>g-right: 10px; padding-bottom: 10px; padding-left: 10px; border-t 
>op-width: 1px; border-right-width: 1px; border-bottom-width: 1px; 
> border-left-width: 1px; border-top-style: solid; border-right-st 
>yle: solid; border-bottom-style: solid; border-left-style: solid; 
> border-top-color: rgb(223, 236, 241); border-right-color: rgb(22 
>3, 236, 241); border-bottom-color: rgb(223, 236, 241); border-lef 
>t-color: rgb(223, 236, 241); overflow-x: auto; overflow-y: auto;  
>font: normal normal normal 12px/normal 'Courier New', 'Andale Mon 
>o', monospace; color: rgb(37, 34, 29);"> 
395function outside(x) {
396   function inside(y) {
397      return x + y;
398   }
399   return inside;
400}
401result = outside(3)(5); // returns 8
402</pre>
403    <div id="section_11">
404      <h4 class="editable" style="margin-top: 0px; margin-right: 
>0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padd 
>ing-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weig 
>ht: normal; font-family: Georgia, 'Times New Roman', Times, serif 
>; color: rgb(43, 39, 32); font-size: 18px;"> 
405        <span>Efficiency considerations</span>
406      </h4>
407      <div class="editIcon" style="display: inline; visibility: h
>idden; margin-left: 4px; font-size: 11px; font-weight: normal;"> 
408        <h4 class="editable" style="margin-top: 0px; margin-right
>: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; pa 
>dding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-we 
>ight: normal; font-family: Georgia, 'Times New Roman', Times, ser 
>if; color: rgb(43, 39, 32); font-size: 18px;"> 
409          <a href="/En/Core_JavaScript_1.5_Reference/Functions_an
>d_function_scope#" style="text-decoration: none; color: rgb(4, 12 
>1, 167); visibility: hidden;" title="Edit section"><span class="i 
>con" style="height: 16px; overflow-x: hidden; overflow-y: hidden; 
>"><img alt="Edit section" class="sectionedit" src="/skins/common/ 
>icons/icon-trans.gif"></span></a> 
410        </h4>
411      </div>
412      <p style="margin-top: 0px; margin-right: 0px; margin-bottom
>: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px;  
>padding-bottom: 0px; padding-left: 0px;"> 
413        Notice how&nbsp;<code style="color: rgb(37, 34, 29); font
>-weight: inherit;">x</code>&nbsp;is preserved when&nbsp;<code sty 
>le="color: rgb(37, 34, 29); font-weight: inherit;">inside</code>& 
>nbsp;is returned. A closure preserves the arguments and variables 
> in all scopes it contains. Since each call provides potentially  
>different arguments, a closure must be created for each call to t 
>he outer function. In other words, each call to&nbsp;<code style= 
>"color: rgb(37, 34, 29); font-weight: inherit;">outside</code>&nb 
>sp;creates a closure. For this reason, closures can use up a lot  
>of memory. The memory can be freed only when the returned&nbsp;<c 
>ode style="color: rgb(37, 34, 29); font-weight: inherit;">inside< 
>/code>&nbsp;is no longer accessible. In this case, the closure of 
>&nbsp;<code style="color: rgb(37, 34, 29); font-weight: inherit;" 
>>inside</code>&nbsp;is stored in<code style="color: rgb(37, 34, 2 
>9); font-weight: inherit;">result</code>. Since&nbsp;<code style= 
>"color: rgb(37, 34, 29); font-weight: inherit;">result</code>&nbs 
>p;is in the global scope, the closure will remain until the scrip 
>t is unloaded (in a browser, this would happen when the page cont 
>aining the script is closed). 
414      </p>
415    </div>
416    <p>
417      &lt;/snip&gt;
418    </p>
419    <p>
420      I'd be suprised if this is true.<br>
421      Returning fninside3 = outside(3);<br>
422      would put the closure in the variable, but surely if an int
>eger result is returned, that's not going to be stored in the ret 
>urn value. &nbsp;I'd assume the instance would be destroyed (or a 
>t least deallocated due to zero references) as soon as the result 
> is returned. 
423    </p>
424    <p>
425      Edit - whoops, just read a duplicate of my post above. &nbs
>p;Seems I'm right, so I might tweak the main page to reflect it.  
>&nbsp;It's a great page apart from a few little gaffes. 
426    </p>
427    <p>
428      Ben McIntyre - 23 Feb 10

Back to History