Question

Because jQuery is a widely used and mature collaborative effort, I can’t help but to look at its source for guidance in writing better Javascript. I use the jQuery library all the time along with my PHP applications, but when I look under the hood of this rather sophisticated library I realize just how much I still don’t understand about Javascript. Lo, I have a few questions for the SO community. First of all, consider the following code…

$('#element').attr('alt', 'Ivan is SUPER hungry! lolz');

vs

$('#element').attr({'alt': 'Ivan is an ugly monster! omfgz'});

Now, is this to say that the attr() method was designed to accept EITHER an attribute name, an attribute name and a value, or a pair-value map? Can someone give me a short explanation of what a map actually is and the important ways that it differs from an array in Javascript?

Moving on, the whole library is wrapped in this business…

(function(window, undefined) { /* jQuery */ })(window);

I get that the wrapped parentheses cause a behavior similar to body onLoad="function();", but what is this practice called and is it any different than using the onLoad event handler? Also, I can’t make heads or tails of the (window) bit there at the end. What exactly is happening with the window object here?

Am I wrong in the assessment that objects are no different than functions in Javascript? Please correct me if I’m wrong on this but $() is the all encompassing jQuery object, but it looks just like a method. Here’s another quick question with a code example…

$('#element').attr('alt', 'Adopt a Phantom Cougar from Your Local ASPCA');

… Should look something like this on the inside (maybe I’m wrong about this)…

function $(var element = null) {
    if (element != null) {
        function attr(var attribute = null, var value = null) {
            /* stuff that does things */
        }
    }
}

Is this the standing procedure for defining objects and their child methods and properties in Javascript? Comparing Javascript to PHP, do you use a period . the same way you would use -> to retrieve a method from an object?

I apologize for this being a bit lengthy, but answers to these questions will reveal a great deal to me about jQuery and Javascript in general. Thanks!

Answer 1

1. Method overloading

$('#element').attr('alt', 'Ivan is SUPER hungry! lolz');

vs

$('#element').attr({'alt': 'Ivan is an ugly monster! omfgz'});

var attr = function (key, value) {
  // is first argument an object / map ?
  if (typeof key === "object") {
    // for each key value pair
    for (var k in key) {
      // recursively call it.
      attr(k, key[k]);
    }
  } else {
    // do magic with key and value
  }
}

2. Closures

(function(window, undefined) { /* jQuery */ })(window);

Is not used as an onload handler. It’s simply creating new scope inside a function.

This means that var foo is a local variable rather then a global one. It’s also creating a real undefined variable to use since Parameters that are not specified passes in undefined

This gaurds againts window.undefined = true which is valid / allowed.

the (window) bit there at the end. What exactly is happening with the window object here?

It’s micro optimising window access by making it local. Local variable access is about 0.01% faster then global variable access

Am I wrong in the assessment that objects are no different than functions in Javascript?

Yes and no. All functions are objects. $() just returns a new jQuery object because internally it calls return new jQuery.fn.init();

3. Your snippet

function $(var element = null) {

Javascript does not support default parameter values or optional parameters. Standard practice to emulate this is as follows

function f(o) {
  o != null || (o = "default");
}

Comparing Javascript to PHP, do you use a period . the same way you would use -> to retrieve a method from an object?

You can access properties on an object using foo.property or foo["property"] a property can be any type including functions / methods.

4. Miscellanous Questions hidden in your question

Can someone give me a short explanation of what a map actually is and the important ways that it differs from an array in Javascript?

An array is created using var a = [] it simply contains a list of key value pairs where all the keys are positive numbers. It also has all the Array methods. Arrays are also objects.

A map is just an object. An object is simply a bag of key value pairs. You assign some data under a key on the object. This data can be of any type.