What is the purpose of passing-in undefined?

I have noticed jQuery and related keynote plugins like jQuery.UI pass undefined as a parameter into anonymous functions used in their module definitions, like so:

(function($, undefined) { ... })(jQuery);

Alternatively, I have noticed other plugins recommended by jQuery and/or others do NOT pass undefined in as a parameter.

This is probably a silly question, but...

Shouldn't it always be available anyway? Why pass it in? Is there some sort of other purpose or trick going on here?

There are two reasons for that:

1. If undefined is a variable in the function scope rather than a global object property, minifiers can reduce it to a single letter thus achieving a better compression rate.

2. Before ES5*, undefined was a property of the global object without write-protection. So it could be overwritten, resulting in strange and unexpected behavior. You could do something like this:

   var test = 123; undefined = 123; if (test === undefined){ // this will actually be true, since undefined now equals 123 }

By having an function argument undefined (the name actually does not matter) which you don't pass a parameter to, you could make sure you have a variable which really is undefined so you can test "undefinedness" against this variable.

Btw. the safest method to test for undefined is: typeof ( var ) === 'undefined'

(*) With EcmaScript 5, the global properties undefined, NaN and Infinity became readonly. So with its general adoption in all modern browsers - of course with the exception of IE 9 - overwriting those values was not possible anymore.

That is done to make sure that undefined always is undefined. In older versions of the ECMAScript spec (prior to ECMAScript 5), undefined wasn't a reserved word but a regular variable. In older browsers this would be allowed for instance:

undefined = 2; // Assign a different value to undefined

// Now this statement would be true
if (undefined == 2)

So to make sure that undefined is in fact undefined, even if some other "evil" script would have reassigned undefined with another value, you create a parameter that you call undefined, and then when you call the function, you make sure to not pass a value to that parameter - thus you can be sure that the variable undefined will always be undefined within your function.

So in the case of jQuery:

(function($, undefined) { ... })(jQuery);

They pass in jQuery and assign it to the $ variable for convenience, but then they don't pass a second value to the undefined parameter, thus undefined will be undefined.

Modern browsers

In modern browsers, undefined is a non-configurable, non-writable property per the ECMAScript 5 specification.

undefined is not a reserved word in javascript, it is simply a variable. jQuery is ensuring that if some bad developer overwrites the value of undefined in their javascript, then jQuery will ignore it and establish it's own variable, undefined, which is never passed a value (see the self-executing (jQuery) at the end) and is therefore actually undefined.