miscoded

Can your browser handle a call depth of 5000 functions? Look here and see how far you get with various JS engines:

func5000.htm

I'd really like to know if there is a hard-coded limitation or if it depends on system speed and memory, for example. Discussion is open in the comments

The other day (well, night actually) I was looking at a problem on a site that used the jQuery library. Though I've heard of it, I haven't seen jQuery on live sites before and I thought it shows off some quite interesting features of JavaScript.

The latest version of the library is available so you can see what I'm talking about.

A function can call itself recursively as constructor

Just inside the jQuery function we find:

if ( window == this )
return new jQuery(a,c);

This clever little trick means you don't need to use the "new" keyword all over your code to create a new jQuery object. You can just do

var obj=jQuery()

and the this check will detect that it wasn't called as a constructor and call itself recursively, this time using the "new" keyword to define the expected jQuery object.

I have a question about the if clause though - it presumably means trouble if you change the "this" object and use something else than window. Say,

var obj = jQuery.call(document)

would probably break something. I don't know jQuery well enough to tell if that would be a problem, but the check could perhaps be

if(this.constructor!=arguments.callee)

to catch all cases?

Using || operator to default to an argument inside a function call

You may be used to seeing the || operator being used to provide a default value for a variable. For example

var username=prompt('Your name please')||'anonymous'

will set the variable to "anonymous" if the user cancels the prompt or doesn't type any value.

It still took me a while to understand what is going on here:

return this.setArray(
// HANDLE: $(array)
a.constructor == Array && a ||

// HANDLE: $(arraylike)
// Watch for when an array-like object is passed as the selector
(a.jquery || a.length && a != window && !a.nodeType && a[0] != undefined && a[0].nodeType) && jQuery.makeArray( a ) ||

// HANDLE: $(*)
[ a ] );

The basic idea is: if the object a is an array, we pass it to the function directly. If it is an object that is somewhat similar to an array (for example a NodeList), we pass the result of calling the jQuery.makeArray function which will take all the elements/nodes and add them to an actual array. Otherwise, we just pass an array containing nothing but the object a.

The key to understanding this is to understand that the statement

a.constructor == Array && a

actually "returns" a if the first comparison is true. It is probably better phrased as "evaluates to a" but it may be easier explained as "returns".

Similarly,

(a.jquery || a.length && a != window && !a.nodeType && a[0] != undefined && a[0].nodeType) && jQuery.makeArray( a )

will go through all the conditions, and if they all hold true return the result of calling the makeArray function.

The || operator ties it all together and ensures the first clause that evaluates to something is chosen as input to the function.

You can use Array.push to add array elements to any object

The next interesting snippet is inside the setArray function itself:

setArray: function( a ) {
this.length = 0;
[].push.apply( this, a );
return this;
}

Look at [].push.apply( this, a );. What happens here is that the array literal's "push" method is used to push element a onto the this object which isn't an array but a jQuery object. That's right, push is generic and can be used with any object. It means the object gets a ".length" property like an array has and can be iterated with for loops. Example:

var obj = new Object(); /* Yes: an object, not an array. */
var str='';
Array.prototype.push.call(obj, 'Hello');
Array.prototype.push.call(obj, ' World');

for(var i=0;i<obj.length;i++){
str+=obj[i];
}
alert(str);

Array methods being generic is part of the amazing flexibility of JavaScript, but this feature of the language might not be well known among authors.

About the jQuery code, I wonder if their approach of creating an empty array literal to use its push method is slower or faster than my Array.prototype lookup. Perhaps the question will inspire a reader to do some performance testing?

The humble "arguments" variable that always exists inside a function call in JavaScript has demonstrated some unexpected behaviour today. This makes me really puzzled because I can not find anything in the ECMA-262 specification that mandates the behaviour - yet all browsers do the same thing in a very obscure corner of their implementations.. Why do we all implement it that way if we weren't explicitly instructed to by the specification?

Here is the issue in a minimal snippet of JavaScript:

function test(){}

test.arguments='something';

test();

alert(test.arguments); // test.arguments is now null ??

so..? Inside the function body we have a local variable called "arguments", but this variable also becomes a property of the function itself, and is subsequently reset to null. Consider

function test(){ alert(arguments==test.arguments); }

which says "true" and shows us that the local variable and the function property refer to the same object.

Some side-effects of this implementation include:

• "arguments" is a reserved word as function property name, it can not be used
  
• We can work out whether a function has been called by a script or not! Consider
  

  Function.prototype.arguments=true;
  function test(){};
  .
  . /* function definitions and calls here */
  .
  var testWasCalled = ! test.arguments;

  
  "testWasCalled" is now true if and only if the script has used the "test" function during its execution. Might be a handy trick for trying to optimise large scripts
  

..but where in the spec is this specified? In other words, is it a bug or a feature?

This snippet is brought to you by Yahoo!Japan blogs. Quiz of the day: what is the RegExp meant to do and why does it fail?

if(img.match(/(.[jJ][pP][eE]?[gG]|.[gG][iI][fF]|.[pP][nN][gG])/)) {
return true;
}
return false;

(Yes, the variable name is a hint.)