What is the purpose of passing-in undefined?

Question

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?

Answer 1

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.