Problog

This post cover the following topics:

• arguments object
• caller object
• callee object
• introduce a simple stack trace function for all browsers

When i wad first introduced to the arguments object and its caller property i thought about all the cool things i can do with it (yes i’m a geek).

What is arguments Object

The arguments object is accessible within the body of a function. arguments is a special property that refers to an object known as the Arguments object. The Arguments object is an array-like object that allows to access the arguments passed to a function retrieved as an array rather then by name. Lets go over of a few interesting properties of the arguments object:

length - tells you the actual number of parameters passed to the function. This can be used to validate the actual parameters to the number of parameters the programmer defined with the function. For example:

function fn(a,b,c,d){
    if(arguments.length != 4 )
        throw new Error("Not the right number of arguments");
}

another cool thing that you can do with the arguments object is to write a generic function that takes any number of parameters, for example:

function average(/*any number of parameter*/){
    var sum = 0;
    for( var i=0;i<arguments.length;i++){
        sum += arguments[i];
    }
    return sum/arguments.length;
}

callee - This is another interesting property of Arguments object. The property refers to the function that is currently being executed. The callee property doesn’t have too many useful implementations (so i think) but you could use it to call recursively to an unnamed function. Whats more interesting about callee is that it has the caller property – arguments.callee.caller

caller - This object points to the Function object that called the current function. This could be used for tracking the stack

Implementing a Simple Stack Tracker

when i first thought about implementing my own stack tracker just for fun (yes, we already established that i’m a geek, let it go!)  i implemented it in the most straightforward and simplest way as so:

function getStack(){
    var caller = arguments.callee.caller;
    var stack = "Stack = ";
    while (caller){
        stack += "-->"+caller.name;
        caller = caller.arguments.callee.caller;
    };
    return stack;
}

But the problem is that caller.name is only compatible for Firefox, so we need something more generic. If we have used caller.toString() we will get the entire function code – which is not what we need. But, RegExing the function code, we can get the function name:

function getStack(){
    fnRE  = /function\s*([\w\-$]+)?\s*\(/i;
    var caller = arguments.callee.caller;
    var stack = "Stack = ";
    var fn;
    while (caller){
        fn = fnRE.test(caller.toString()) ? RegExp.$1 || "{?}" : "{?}";
        stack += "-->"+fn;
        caller = caller.arguments.callee.caller;
    };
    return stack;
}

That’s it, it should work on any browser, although i have tested it only on Firefox and IE.

The Next Step

Of course you can develop this function to be more advance to show the parameters and adjust the functionality you can show according to the browser – or you can just use existing libraries like me. after a few searcher i found Eric Wendelin implementation for a stack tracer - very nice implementation.

Enjoy.