Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30387 > unrolled thread

Re: Adding data to a function

Back to article view | Back to comp.lang.javascript

This discussion starts older than the indexed window; earlier articles aren't shown. The article labeled Started by below is the oldest one visible, not the original post.

Contents

  Re: Adding data to a function Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-05-03 19:08 +0200

#30387 — Re: Adding data to a function

Stefan Ram wrote:

>   The following function always would recompute
>   »window.document.getElementById( "info" )«.
> 
> "use strict";
> 
> function f()
> { window.document.getElementById( "info" ).innerHTML
>   = 'The function "f" was called.'; }
> 
>   Is it good style to attach this data to f as a property of f,
>   so that it does not have to be recomputed each time f is
>   being called, i.e.:
>   
> "use strict";
> 
> function f()
> { f.info.innerHTML
>   = 'The function "f" was called.'; }
> f.info = document.getElementById( "info" );
> 
>   ?

You should avoid "use strict" in the global execution context because it 
affects all subsequent code – even code that has not been written to run in 
strict mode (you cannot undo "use strict" in local execution contexts).  
JSHint warns you about that by default: “W097: Use the function form of "use 
strict".”)  See <http://jshint.com/docs/options/#globalstrict> p. for 
details.

That aside, whether the answer to your question should be “yes” depends on 
the use-case.  By default, functions are extensible objects in ECMAScript 
implementations, so there is, in theory, nothing wrong with extending them.

However, one should take care to avoid name collisions as they are objects 
that already have and inherit properties.  [To that end, my JSX provides 
jsx.object.findNewProperty().]

Also, there is no possibility for a race condition only if the property 
value is never written twice.

And you have to consider the possibility that the element was not in the 
document tree when the code was first executed, or that the element had been 
removed or replaced afterwards.  A document.getElementById("…") call always 
works on the *current* document tree.

An alternative approach that is still rather efficient, with which name 
collisions are minimized and race conditions avoided, is the module pattern:

  var foo = (function (doc) {
    "use strict";

    /*
     * The value assigned could also be one of a property
     * of the object to which a reference is returned
     */
    var info = doc.getElementById("info");

    return {
      bar: function (s) {
        info.innerHTML = s;
      }
    }; 
  }(document));

  /* executed much later: */

  foo.bar("baz");

A variant of this that tends to be more efficient is to initialize a 
variable or property on first use:

  var foo = (function (doc) {
    "use strict";

    /*
     * The value assigned could also be one of a property
     * of the object to which a reference is returned
     */
    var info = null;

    return {
      bar: function (s) {
        if (info === null) info = doc.getElementById("info");
        if (info) info.innerHTML = s;
      }
    }; 
  }(document));

Whether the assignment should only take place only if the base object can be 
resolved depends on the use-case and is a matter for debate; the code runs 
more smoothly with the test it, but as it is, without error handling, it 
hides regressions.  You would tend to test before assignment if you did not 
know the markup well that you are working on; for example, you would 
certainly test, and handle errors explicitly, in a browser extension, and in 
a bookmarklet that is available to the general public.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web