MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Compare Revisions

Functions

Change Revisions

Revision 44604:

Revision 44604 by Rob W on

Revision 44605:

Revision 44605 by Kizer on

Title:
Functions
Functions
Slug:
JavaScript/Guide/Functions
JavaScript/Guide/Functions
Tags:
JavaScript, Functions
JavaScript, Functions
Content:

Revision 44604
Revision 44605
n147      The scope of a function is the function in which it is decln147      The scope of a function is the function in which it is decl
>ared, or the entire program if it is declared at the top level.>ared, or the entire program if it is declared at the top level. N
 >ote that this works only when defining the function using the abo
 >ve syntax (i.e. <code>function funcName(){}</code>). The code bel
 >ow will not work.
148    </p>
148    </p>149    <pre>
150print(square(5));
151square = function (n) {
152  return n * n;
153}
154</pre>
nn179    <p>
180      There are other ways of calling functions. There are usuall
 >y cases where the function needs to be called dynamically, or the
 > number of arguments vary, or the the context of the function cal
 >l needs to be set to a specific object determined at runtime. The
 > method <em><code>functionName.</code></em><code>apply</code> can
 > be used to achieve this goal.
181    </p>
182    <h2 class="deki-transform">
183      Function scope
184    </h2>
185    <p>
186      Variables defined inside a function cannot be accessed from
 > anywhere outside the function, because the variable is defined o
 >nly in the scope of the function. However, a function can access 
 >all variables and functions defined inside the scope in which it 
 >is defined. In otherwords, a function defined in the global scope
 > can access all variables defined in the global scope. A function
 > defined inside another function can also access all variables de
 >fined in it's parent function and any other variable to which the
 > parent function has access.
187    </p>
188    <pre class="brush: js">
189// The following variables are defined in teh global scope
190var num1 = 20,
191    num2 = 3,
192    name = "Chamahk";
193 
194// This function is defined in teh global scope
195function multiply() {
196  return num1 * num2;
197}
198 
199multiply(); // Returns 60
200 
201// A nested function example
202function getScore () {
203  var num1 = 2,
204      num2 = 3;
205  
206  function add() {
207    return name + " scored " + (num1 + num2);
208  }
209  
210  return add();
211}
212 
213getScore(); // Returns "Chamahk scored 5"
214</pre>
215    <h2>
216      Closures
217    </h2>
218    <p>
219      Closures are one of the most powerful features of JavaScrip
 >t. JavaScript allows for the nesting of functions and, in additio
 >n, grants the inner function full access to all the variables and
 > functions defined inside the outer function (and all other varia
 >bles and functions that the outer function has access to). Howeve
 >r, the outer function does not have access to the variables and f
 >unctions defined inside the inner function. This provides a sort 
 >of security for the variables of the inner function. Also, since 
 >the inner function has access to the scope of the outer function,
 > the variables and functions defined in the outer function will l
 >ive longer than the outer function itself, if the inner function 
 >manages to survive beyond the life of the outer function. A closu
 >re is created when the inner function is somehow made available t
 >o any scope outside the outer function.
220    </p>
221    <pre class="brush: js">
222var pet = function(name) {      // The outer function defines a v
 >ariable called "name"
223  var getName = function() {
224    return name;                // The inner function has access 
 >to the "name" variable of the outer function
225  }
226  
227  return getName;               // Return the inner function, the
 >reby exposing it to outer scopes
228}
229 
230var myPet = pet("Vivie");      
231myPet();                        // Returns "Vivie"
232</pre>
233    <p>
234      It can be much more complex than the code above. An object 
 >containing methods for manipulating the inner variables of the ou
 >ter function can be returned.
235    </p>
236    <pre>
237var createPet = function(name) {
238  var sex;
239  
240  return {
241    setName: function(newName) {
242      name = newName;
243    },
244    
245    getName: function() {
246      return name;
247    },
248    
249    getSex: function() {
250      return sex;
251    },
252    
253    setSex: function(newSex) {
254      if(typeof newSex == "string" &amp;&amp; (newSex.toLower() =
 >= "male" || newSex.toLower() == "female")) {
255        sex = newSex;
256      }
257    }
258  }
259}
260 
261var pet = createPet("Vivie");
262pet.getName();                  // Vivie
263 
264pet.setName("Oliver");
265pet.setSex("male");
266pet.getSex();                   // male
267pet.getName();                  // Oliver
268</pre>
269    <p>
270      In the codes above, the <code>name</code> variable of the o
 >uter function is accessible to the inner functions, and there is 
 >no other way to access the inner variables except through the inn
 >er functions. The inner variables of the inner function act as sa
 >fe stores for the inner functions. They hold "persistent", yet se
 >cure, data for the inner functions to work with. The functions do
 > not even have to be assigned to a variable, or have a name.
271    </p>
272    <pre>
273var getCode = (function(){
274  var secureCode = "0]Eal(eh&amp;2";    // A code we do not want 
 >outsiders to be able to modify...
275  
276  return function () {
277    return secureCode;
278  };
279})();
280 
281getCode();    // Returns the secret code
282</pre>
283    <p>
284      There are, however, a number of pitfalls to watch out for w
 >hen using closures. If an enclosed function defines a variable wi
 >th the same name as the name of a variable in the outer scope, th
 >ere is no way to refer to the variable in the outer scope again.
285    </p>
286    <pre>
287var createPet = function(name) {  // Outer function defines a var
 >iable called "name"
288  return {
289    setName: function(name) {    // Enclosed function also define
 >s a variable called "name"
290      name = name;               // ??? How do we access the "nam
 >e" defined by the outer function ???
291    }
292  }
293}
294</pre>
295    <p>
296      The magical <code>this</code> variable is very tricky in cl
 >osures. They have to be used carefully, as what <code>this</code>
 > refers to depends completely on where the function was called, r
 >ather than where it was defined. An excellent and elaborate artic
 >le on closures can be found <a class=" external" href="http://jib
 >bering.com/faq/notes/closures/">here</a>.
297    </p>
tt340      Please note that the <code>arguments</code> variable is "ar
 >ray-like", but not an array. It is array-like in that is has a nu
 >mbered index and a <code>length</code> property. However, it does
 > not possess all of the array-manipulation methods.
341    </p>
342    <p>

Back to History