Javascript function parameters

Question

Hello,

I am working on a project which involves the ExtJS library and I came upon this piece of code which did not make sense (but it works). Please help :(.

TreePanel.on('click', showDocumentFromTree);
function showDocumentFromTree(node) {   
    if (TreePanel.getSelectionModel().isSelected(node)) {
        dataStore.baseParams = {
            node : node.id,
            limit : 10
        }
        dataStore.load({
            params : {
                start : 0
            }
        });
    }
};

So the function definition for "showDocumentFromTree" has a parameter called "node" but when the code calls it, it did not pass in anything. Also, the object "node" is not a global (as far as I know).

So I'm confused on how that works? Is this some magic that Javascript has?

Also, when I do a console.debug to print "node" it has stuff in it. (console.debug for FireBug)

Thank you for your time, J

Answer 1

When the code is doing `TreePanel.on('click', showDocumentFromTree)', it isn't calling showDocumentFromTree, it's passing the function showDocumentFromTree as an argument. It will then be called later, by the onclick event handler that it's being set up for, and it will be passed its node argument then.

Answer 2

In this case, the parameter to showDocumentFromTree is a magic parameter that is supplied by the browser when the user clicks on the element to which the action is attached. In this case, node will refer to the TreePanel. Javascript - The this keyword explains more detail about this mechanism. It is probably more common to use the parameter name this than node as in your example.

Answer 3

The first line binds the showDocumentFromTree function to the click event. What is passed to TreePanel.on is a reference to the showDocumentFromTree function, not the call itself.

When an event fires, the bound function(s) will be called, with the triggering object as the first parameter. In this case, it will be the DOM node that was clicked.

To illustrate, the first line can be rewritten to:

TreePanel.on('click', function(node) {
   showDocumentFromTree(node);
});

OK, maybe this is not much clearer, but you can see that it actually passes a function as argument to the on method, rather than calling the method itself.

Answer 4

TreePanel is a class/component in Extjs. In your first line:

TreePanel.on('click', showDocumentFromTree);

You are assigning a click handler to the TreePanel class. Meaning, whenever the TreePanel is clicked, it will call your showDocumentFromTree function. Part of the Click Event for the TreePanel is to pass the TreeNode that initiated, or was the item, that "caused" the click event.

To see how this functionality works, look at the Ext.tree.TreeEventModel class specifically the initEvents, delegateClick, and onNodeClick functions.

Answer 5

Wthout repeating what other posters have said about the browser supplying the arguments to the function, I wanted to make a general note about javaScript as a language. JavaScript, unlike languages like C++ and Java, does NOT respect parameters defined in the function signature. This means you can have a function like:

function doSomething(myParam){
  ... Does Some Stuff
}

Then call it in any manner below:

doSomething();

doSomething(foo);

doSomething(foo, bar);

doSomething(foo, bar, baz);

etc..

If it is called without parameters defined in the signature, the missing parameters will be undefined. Extra parameters can only be accessed by the args array that all functions have.

I know this wasn't specific to your question but I thought it might be good for context and general interest.