The hidden life of JavaScript function properties

I received this useful peace of information regarding the JavaScript function properties from @gregsidelnikov ‘s newsletter. @gregsidelnikov is been posting very useful javascript/jquery tips, following tip really useful & is one of my favourite:

Everyone knows what functions are. We can define and call them. In JavaScript almost everything is an object. Even strings can be constructed by creating a new object (vs. just defined with the literal string value:)

var str = new String(“Hello”);

Functions are objects too. Objects of type Function . Therefore we can create them in this rather peculiar way:

var add_two_numbers = new Function(“ arg1 “, “ arg2 “, “return arg1 + arg2;”);

This would be the exact equivalent to doing the following:

function add_two_numbers( arg1, arg2) { return arg1+arg2 }

What’s next — now that we created a function?

Accessing function properties

It’s amazing what kind of tools JavaScript offers us when it comes to working with functions. For the most part you will probably be comfortable with simply defining them and calling later on. But we are also given properties I personally didn’t know about until just recently.

We can actually retrieve the function’s name as a string from within the code. This way we know which function is being called. And also which function called the function that is being currently executed. These properties are located within the function’s prototype object. And some within the function’s arguments property. Which, we can modify ourselves. Or simply retrieve existing values from it:

arguments (Deprecated as prototype property ; but we can use arguments object instead)
An array corresponding to the arguments passed to the function.

arity (it is deprecated, but we can use length property instead)
The number of arguments expected by the function.

caller (non-standard JavaScript)
Refers to the function that invoked the function that is being currently executed.

constructor
The constructor of the function. Function constructors create the prototype object.

length
The number of arguments expected by the function.

name (non-standard JavaScript; the name of the function that was called.)
The name of the function being executed.

Notes: arguments.callee is forbidden in strict mode. And I am not sure how cross-browser it is.

arguments.callee.length is the number of arguments received by the function. It could be less than the number of arguments specified:

arguments.length is the number of arguments specified in function definition.

caller , callee , and arguments properties may not be accessed on strict mode functions or the arguments objects for calls to them. They appear to be deprecated in ES5 and removed in strict mode. For us it means that this may not work in all browsers. Be careful.

There are two different ways to access the same properties. Through the function’s constructor object ( Function ) and through the arguments object which exists in all functions.

However, Function.caller is implemented in all currently existing browsers. When getting caller from the currently executed function, use the callee (its own) literal name to access it:

function fn () {
var caller = fn . caller.name;
}

While arguments.caller is deprecated in favor of Function.caller . Sticking to Function.caller is better in this case.

Because these properties are not available in all browsers in all modes (strict or not) the thing about these extras is that we can use them in projects that run locally in our favorite browser (and are not designed for the Internet.) For example, I am using an article publishing program I wrote myself. I always run it in my favorite browser: Google Chrome, where many JavaScript features work that may not in other browsers. Remember that not all JavaScript programs are meant for the public Internet.

And finally, here is source code for obtaining various properties of the function:
function show_props (a,b,c,d,e)
{
var msg = “function name = ” + arguments.callee.name + “n”;
msg += “called from = ” + show_props.caller.name + “n”;
msg += “arguments.length = ” + arguments.length + ” argument(s) were passed.n”
msg += “show_props.length (arity) = ” + show_props.length + ” argument(s) are defined total.n”;
msg += “arguments = ” + arguments + “n”;
for (var i = 0; i < arguments.length; i++)
msg += “arguments[” + i + “] = ” + arguments[i] + “n”;

msg += “And arguments.callee.toString() is the function’s literal body in string format = n” + arguments.callee.toString() + “n”;

alert( msg );
}

function parent ()
{
show_props (1,2,3);
}

parent ();

The result is shown below:

function name = show_props
called from = parent
arguments.length = 3 argument(s) were passed.
show_props.length (arity) = 5 argument(s) are defined total.
arguments = [object Arguments]
arguments[0] = 1
arguments[1] = 2
arguments[2] = 3
And arguments.callee.toString() is the function’s literal body in string format =
function show_props(a,b,c,d,e)
{
var msg = “function name = ” + arguments.callee.name + “n”;
msg += “called from = ” + show_props.caller.name + “n”;
msg += “arguments.length = ” + arguments.length + ” argument(s) were passed.n”
msg += “show_props.length (arity) = ” + show_props.length + ” argument(s) are defined total.n”;
msg += “arguments = ” + arguments + “n”;
for (var i = 0; i < arguments.length; i++)
msg += “arguments[” + i + “] = ” + arguments[i] + “n”;

msg += “And arguments.callee.toString() is the function’s literal body in string format = n” + arguments.callee.toString() + “n”;

alert(“msg”);

As you can see we can even output the body of the function that is being executed from within itself, as a string.

Use the Function object (in this case the literal name of the function show_props itself) and the arguments property to gather insight into which function called which, parameter names, number of parameters and function names.