Loading ...
Sorry, an error occurred while loading the content.
 

Javascript: what is the difference in coding method

Expand Messages
  • matt.pettis
    Hi, I was wondering if someone might explain the difference in a javascript construction. In the example shown at
    Message 1 of 4 , Jan 31, 2008
      Hi,

      I was wondering if someone might explain the difference in a
      javascript construction.

      In the example shown at

      http://developer.yahoo.com/yui/examples/dom/setxy_clean.html

      the page source code has the javascript logic wrapped in a function:
      ---------------------------------------------------------------
      (function() {
      var move = function(e) {
      YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e));
      };

      YAHOO.util.Event.on(document, "click", move);

      YAHOO.log("The example has finished loading; as you interact with
      it, you'll see log messages appearing here.", "info", "example");

      })();
      ---------------------------------------------------------------

      However, the code explained in the examples for the very same example at:

      http://developer.yahoo.com/yui/examples/dom/setxy.html

      does not wrap this code in a function.

      Also, I took the first example and removed the function wrapper and
      just stuck the function body inside the 'script' tags and the code ran
      the same way.

      So, my question... what does the '(function(){...})()' construct do
      and why is it removable?

      links to explanations of the use of this construct would be happily
      accepted.

      thanks for all of your help so far,
      matt
    • Satyam
      The purpose of the function wrapper is to make all variables and functions within it private. The variables become local to the wrapper function and are
      Message 2 of 4 , Jan 31, 2008
        The purpose of the function wrapper is to make all variables and functions
        within it private. The variables become local to the wrapper function and
        are visible to all code inside it but, as regular local variables, they are
        not visible outside.

        The wrapper makes no difference in the working of the code inside, it only
        avoids collisions in the global namespace. You may use JSLint to check the
        same code with and without the wrapper and you will see that without it, all
        variables (such as move) will show as global variables. Should your page
        ever include some extra code from an external source, hiding variables from
        the global namespace is safer than just hoping there will be no coincidence
        in names.

        The other alternative is to define all variables and functions under your
        own namespace under YAHOO, but that makes long and tedious names.

        Satyam


        ----- Original Message -----
        From: "matt.pettis" <matthew.pettis@...>
        To: <ydn-javascript@yahoogroups.com>
        Sent: Friday, February 01, 2008 5:49 AM
        Subject: [ydn-javascript] Javascript: what is the difference in coding
        method


        > Hi,
        >
        > I was wondering if someone might explain the difference in a
        > javascript construction.
        >
        > In the example shown at
        >
        > http://developer.yahoo.com/yui/examples/dom/setxy_clean.html
        >
        > the page source code has the javascript logic wrapped in a function:
        > ---------------------------------------------------------------
        > (function() {
        > var move = function(e) {
        > YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e));
        > };
        >
        > YAHOO.util.Event.on(document, "click", move);
        >
        > YAHOO.log("The example has finished loading; as you interact with
        > it, you'll see log messages appearing here.", "info", "example");
        >
        > })();
        > ---------------------------------------------------------------
        >
        > However, the code explained in the examples for the very same example at:
        >
        > http://developer.yahoo.com/yui/examples/dom/setxy.html
        >
        > does not wrap this code in a function.
        >
        > Also, I took the first example and removed the function wrapper and
        > just stuck the function body inside the 'script' tags and the code ran
        > the same way.
        >
        > So, my question... what does the '(function(){...})()' construct do
        > and why is it removable?
        >
        > links to explanations of the use of this construct would be happily
        > accepted.
        >
        > thanks for all of your help so far,
        > matt
        >
        >
        >
        >
        > Yahoo! Groups Links
        >
        >
        >
        >
        >
        > --
        > No virus found in this incoming message.
        > Checked by AVG Free Edition.
        > Version: 7.5.516 / Virus Database: 269.19.17/1252 - Release Date:
        > 30/01/2008 20:51
        >
        >
      • matt.pettis
        OK, thanks, that makes sense... This is because Javascript does not have the concept of a bareblock lexical scope like Perl has, correct? And so this is a
        Message 3 of 4 , Feb 1, 2008
          OK, thanks, that makes sense... This is because Javascript does not
          have the concept of a bareblock lexical scope like Perl has, correct?
          And so this is a funky but effective workaround for making a
          lexically scoped environment...?

          Matt

          --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
          >
          > The purpose of the function wrapper is to make all variables and
          functions
          > within it private. The variables become local to the wrapper
          function and
          > are visible to all code inside it but, as regular local variables,
          they are
          > not visible outside.
          >
          > The wrapper makes no difference in the working of the code inside,
          it only
          > avoids collisions in the global namespace. You may use JSLint to
          check the
          > same code with and without the wrapper and you will see that without
          it, all
          > variables (such as move) will show as global variables. Should your
          page
          > ever include some extra code from an external source, hiding
          variables from
          > the global namespace is safer than just hoping there will be no
          coincidence
          > in names.
          >
          > The other alternative is to define all variables and functions under
          your
          > own namespace under YAHOO, but that makes long and tedious names.
          >
          > Satyam
          >
          >
          > ----- Original Message -----
          > From: "matt.pettis" <matthew.pettis@...>
          > To: <ydn-javascript@yahoogroups.com>
          > Sent: Friday, February 01, 2008 5:49 AM
          > Subject: [ydn-javascript] Javascript: what is the difference in coding
          > method
          >
          >
          > > Hi,
          > >
          > > I was wondering if someone might explain the difference in a
          > > javascript construction.
          > >
          > > In the example shown at
          > >
          > > http://developer.yahoo.com/yui/examples/dom/setxy_clean.html
          > >
          > > the page source code has the javascript logic wrapped in a function:
          > > ---------------------------------------------------------------
          > > (function() {
          > > var move = function(e) {
          > > YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e));
          > > };
          > >
          > > YAHOO.util.Event.on(document, "click", move);
          > >
          > > YAHOO.log("The example has finished loading; as you interact with
          > > it, you'll see log messages appearing here.", "info", "example");
          > >
          > > })();
          > > ---------------------------------------------------------------
          > >
          > > However, the code explained in the examples for the very same
          example at:
          > >
          > > http://developer.yahoo.com/yui/examples/dom/setxy.html
          > >
          > > does not wrap this code in a function.
          > >
          > > Also, I took the first example and removed the function wrapper and
          > > just stuck the function body inside the 'script' tags and the code ran
          > > the same way.
          > >
          > > So, my question... what does the '(function(){...})()' construct do
          > > and why is it removable?
          > >
          > > links to explanations of the use of this construct would be happily
          > > accepted.
          > >
          > > thanks for all of your help so far,
          > > matt
          > >
          > >
          > >
          > >
          > > Yahoo! Groups Links
          > >
          > >
          > >
          > >
          > >
          > > --
          > > No virus found in this incoming message.
          > > Checked by AVG Free Edition.
          > > Version: 7.5.516 / Virus Database: 269.19.17/1252 - Release Date:
          > > 30/01/2008 20:51
          > >
          > >
          >
        • Satyam
          I couldn t have said it better, or worst or anything close. I don t have a clue what a lexically scoped environment could possibly be. I guess yes would
          Message 4 of 4 , Feb 2, 2008
            I couldn't have said it better, or worst or anything close. I don't have a
            clue what a 'lexically scoped environment' could possibly be. I guess "yes"
            would be a fitting answer, or perhaps not. Sorry


            ----- Original Message -----
            From: "matt.pettis" <matthew.pettis@...>
            To: <ydn-javascript@yahoogroups.com>
            Sent: Friday, February 01, 2008 11:04 PM
            Subject: [ydn-javascript] Re: Javascript: what is the difference in coding
            method


            > OK, thanks, that makes sense... This is because Javascript does not
            > have the concept of a bareblock lexical scope like Perl has, correct?
            > And so this is a funky but effective workaround for making a
            > lexically scoped environment...?
            >
            > Matt
            >
            > --- In ydn-javascript@yahoogroups.com, "Satyam" <satyam@...> wrote:
            >>
            >> The purpose of the function wrapper is to make all variables and
            > functions
            >> within it private. The variables become local to the wrapper
            > function and
            >> are visible to all code inside it but, as regular local variables,
            > they are
            >> not visible outside.
            >>
            >> The wrapper makes no difference in the working of the code inside,
            > it only
            >> avoids collisions in the global namespace. You may use JSLint to
            > check the
            >> same code with and without the wrapper and you will see that without
            > it, all
            >> variables (such as move) will show as global variables. Should your
            > page
            >> ever include some extra code from an external source, hiding
            > variables from
            >> the global namespace is safer than just hoping there will be no
            > coincidence
            >> in names.
            >>
            >> The other alternative is to define all variables and functions under
            > your
            >> own namespace under YAHOO, but that makes long and tedious names.
            >>
            >> Satyam
            >>
            >>
            >> ----- Original Message -----
            >> From: "matt.pettis" <matthew.pettis@...>
            >> To: <ydn-javascript@yahoogroups.com>
            >> Sent: Friday, February 01, 2008 5:49 AM
            >> Subject: [ydn-javascript] Javascript: what is the difference in coding
            >> method
            >>
            >>
            >> > Hi,
            >> >
            >> > I was wondering if someone might explain the difference in a
            >> > javascript construction.
            >> >
            >> > In the example shown at
            >> >
            >> > http://developer.yahoo.com/yui/examples/dom/setxy_clean.html
            >> >
            >> > the page source code has the javascript logic wrapped in a function:
            >> > ---------------------------------------------------------------
            >> > (function() {
            >> > var move = function(e) {
            >> > YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e));
            >> > };
            >> >
            >> > YAHOO.util.Event.on(document, "click", move);
            >> >
            >> > YAHOO.log("The example has finished loading; as you interact with
            >> > it, you'll see log messages appearing here.", "info", "example");
            >> >
            >> > })();
            >> > ---------------------------------------------------------------
            >> >
            >> > However, the code explained in the examples for the very same
            > example at:
            >> >
            >> > http://developer.yahoo.com/yui/examples/dom/setxy.html
            >> >
            >> > does not wrap this code in a function.
            >> >
            >> > Also, I took the first example and removed the function wrapper and
            >> > just stuck the function body inside the 'script' tags and the code ran
            >> > the same way.
            >> >
            >> > So, my question... what does the '(function(){...})()' construct do
            >> > and why is it removable?
            >> >
            >> > links to explanations of the use of this construct would be happily
            >> > accepted.
            >> >
            >> > thanks for all of your help so far,
            >> > matt
            >> >
            >> >
            >> >
            >> >
            >> > Yahoo! Groups Links
            >> >
            >> >
            >> >
            >> >
            >> >
            >> > --
            >> > No virus found in this incoming message.
            >> > Checked by AVG Free Edition.
            >> > Version: 7.5.516 / Virus Database: 269.19.17/1252 - Release Date:
            >> > 30/01/2008 20:51
            >> >
            >> >
            >>
            >
            >
            >
            >
            >
            > Yahoo! Groups Links
            >
            >
            >
            >
            >
            > --
            > No virus found in this incoming message.
            > Checked by AVG Free Edition.
            > Version: 7.5.516 / Virus Database: 269.19.18/1254 - Release Date:
            > 31/01/2008 20:30
            >
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.