Regarding JavaScript function unorthodoxy...

Question

I've been programming for the Web for quite some time now, but have only just recently discovered a few new intricacies regarding the use of functions and the weird (or so I view them as) things you can do with them. However, they seem at this point only to be syntactically pretty things. I was hoping somebody might enlighten me as to how some of these newly discovered aspects could prove to be useful.

For example, the first time I ran this, I thought for sure it would not work:

<script>
function x(q)
 {
q(x);
 }

x(function(a)
 {
alert(a);
 }
 );
</script>

But it did! Somehow, creating a named function which receives a different, anonymous function as its only parameter and then runs the function passed to it with itself passed as the parameter to it works just fine. This positively blew my mind and I'm almost certain there's a vast amount of practicality to it, but I just can't quite place it yet.

Ah, and another thing I was elated to discover: using a globally scoped variable to store a function, one can later in the execution use JavaScript's eval() function to modify that variable, thus changing the function's inner workings dynamically. An example:

<script>
var f = function()
 {
alert('old text');
 }

eval('f = ' + f.toString().replace('old text', 'new text'));

f();
</script>

Sure enough, that code alerts the "new text" string; when I saw that, my mind was once again blown, but also immediately intrigued as to the potential to create something incredible.

So... my burning question for Stack Overflow: how can such seemingly abstract coding principles be used in any positive way?

Answer 1

Just google javascript as a functional language and you'll find hundreds of uses and examples.

Answer 2

What you're basically asking is How can I use functions as first-class objects?

The biggest and most common usage is closures (or anonymous functions) for event handling. However, just because you can be clever, it doesn't mean you should. Write clear, readable code just as you would in any other language.

Oh, and flog yourself for typing eval and never think about doing it again

Answer 3

The first one, closures, are very common in javascript. If you want some more advanced examples, here's a nice interactive playground you can mess with: http://ejohn.org/apps/learn/.

Here's my window.onload function I use when whatever I'm working on doesn't require a full blown library.

//add events to occur on page load
window.addOnload = function(fn) {
    if (window.onload) {
     var old = window.onload;
     window.onload = function() {
      old();
      fn();
     }
    } else {
     window.onload = fn;
    }
}

Then whenever I need something to happen onload, I can just use an anonymous function. Here's an example from a recent maintenance project of mine.

//make all menu items have a hover property
window.addOnload(function(){
    var cells = document.getElementsByTagName('td');

    for (var i=0; i < cells.length; i++) {
     if (cells[i].className != 'NavMenuItem')  continue;

     (function(cell){
      cell.onmouseover = function() {
       cell.className = 'NavMenuItemHighlight';
      }
      cell.onmouseout = function() {
       cell.className = 'NavMenuItem';
      }
     })(cells[i])
    }
});

As for your second 'discovery', just pretend you never found out about it.

Answer 4

Well, the first one is typically how you prove that the Halting Problem is undecidable...

Whether or not you consider that "useful" is entirely up to you, I guess B-)