Caching the return results of a function from John Resig's Learning Advanced JavaScript

I have a few questions about this function from John Resig's exercise #19 in http://ejohn.org/apps/learn/#19

1. what is the purpose of the second last line getElements.cache = {}; Is it storing return results in an array?

2. If my guess in (1) is correct, is it only catching return results because, in the "else" section of the function, getElements.cache[name] = results;?

3. when I played with the code in the console in the tutorial, I removed the line getElements.cache[name] = results from the "else" section, but still got the same result, as when it was there--namely, it told me that there were 76 elements. What, therefore, is the purpose of this line getElements.cache[name] = results if it`s not necessary to get the result?

4. is there any significance to the fact that, in the "else" section of the function, the order of the line getElements.cache[name] = results; is reversed from the if section of the code, where it says results = getElements.cache[name]

5. finally, is cache a pre-defined function in JavaScript? I can't find it in the docum开发者_开发技巧entation.

function getElements( name ) { 
  var results; 

  if ( getElements.cache[name] ) { 
    results = getElements.cache[name]; 
  } else { 
    results = document.getElementsByTagName(name); 
    getElements.cache[name] = results; 
  } 

  return results; 
} 
getElements.cache = {}; 

log( "Elements found: ", getElements("pre").length );

---

a) The second to last line establishes that the property "cache" on the object getElements is an object. Essentially initializing that property.

b) That would be the cache, think of getElements as an object and the cache is a hash that is holding on to results.

c) Yes, you'll still get the same result because the cache is just caching, it's not changing the answer in anyway, it'll just potentially speed things up.

d) Yes, one is storing a result into the cache, the other is pulling a result out of the cache.

e) No this is a custom property that was defined for "getElements", any number of these with different names could be defined.

---

1.- what is the purpose of the second last line getElements.cache = {}; Is it storing return results in an array?

It's just initializing the object

2.- If my guess in (1) is correct, is it only catching return results because, in the "else" section of the function, getElements.cache[name] = results;?

Yes, its using a cache method to avoid accessing the DOM.

3.- when I played with the code in the console in the tutorial, I removed the line getElements.cache[name] = results from the "else" section, but still got the same result, as when it was there--namely, it told me that there were 76 elements. What, therefore, is the purpose of this line getElements.cache[name] = results if it`s not necessary to get the result?

It's not really necessary in the sense that it's only making the function return faster, since accessing an object it's faster than transversing the DOM.

4.- is there any significance to the fact that, in the "else" section of the function, the order of the line getElements.cache[name] = results; is reversed from the if section of the code, where it says results = getElements.cache[name]

In the else section, first, the results variable is assigned a value with the actual result, then the result is being cached. In the then section, the results variable is just being assigned the cached value. No need to re-cache it

5.- finally, is cache a pre-defined function in JavaScript? I can't find it in the documentation.

It's not predefined. It's being used as a property for this particular function (in JavaScript functions are first class objects and can store values in properties.

Here is the code commented:

function getElements( name ) { 
  var results; 

  if (getElements.cache[name]) { 
    results = getElements.cache[name]; // Use the cached value
  } else { 
    results = document.getElementsByTagName(name); // Get the desired value
    getElements.cache[name] = results; // cache the result
  } 

  return results; 
} 

getElements.cache = {}; // Initialize the cache

---

An alternative caching function

// Were going to get some things.
var getSomeThings = function() {
    // Calling something expense to get the things.
    var things = somethingExpensive();
    // overwriting this function with a function that returns things
    getSomeThings = function() {
         return things;
    }
    // call the new function that returns things and return things.
    return getSomeThings();
};

First time this gets called you calculate things and return it. The second, third, ... this gets called you just return things.

The other example allows you to cache it with a parameter which is different but a similar idea. This means your caching a whole bunch of things rather then just one.

[Edit]

What this does is creates a variable called getSomeThings. Then assigns a it a function. When you call the function it has access to getSomeThings itself as a variable and can set it with a new function.

For example:

function getSomethingExpensive() {
     ...
     return 42;
}
var b = function() {
     b = getSomethingExpensive();
}    
b();
alert(b);