Help understanding Javascript unusual function declaration syntax

Question

I have am trying to understand the Javascript/jQuery behind ColorBox. Some forms of syntax are a bit hard to search on Google as they are a bit lengthy to describe. I am having trouble understanding the following line:

publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) {

So I assume a new function called publicMethod is being created, but how do we but I don't really understand anything beyond the first equals symbol ("=").

A normal function declaration would look like this:

function publicMethod(options, callback) {

So if anybody could help me understanding the syntax I would greatly appreciate it.

Quentin · Accepted Answer · 2011-06-08 06:41:50Z

1

In:

$.fn[colorbox]

$ is an unhelpfully non-descriptive variable name. It contains an object.
$.fn access the fn property of that object.
fn[colorbox] accesses the property of that object which a name that matches the string stored in colorbox

But the right hand side of and = is defined first, So before it assigns that value to publicMethod it assigns the value of $[colorbox] to $.fn[colorbox].

… and before it does that it assigns (to there) a function.

function () {} defines an anonymous function and passes it left (so it gets stored in whatever is on the other side of =)

answered Jun 8, 2011 at 6:41

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stoive · Accepted Answer · 2011-06-08 06:45:12Z

In JavaScript, functions are on the same level as other objects - you can assign them to variables, and pass them as parameters.

Normally, you would declare a function in this way:

function SomeFunc(arg1, arg2) { /* etc etc */ }

An equivalient way would to be:

var SomeFunc = function(arg1, arg2) { /* etc, etc */ }

...because, as above, functions themselves are values that may be assigned or passed.

Many libraries will accept functions as arguments to their own functions, running the passed function at a time which suits them (or passing them on elsewhere, a la any other variable). Often this is for callbacks. When passing functions as arguments, there isn't really a need to give them a name of their own, thus the following does the job:

SomeLibrary.doSomethingThenCallback(function(arg1, arg2) {
    // the doSomethingThenCallback function will decide when, if ever,
    // to run this, or pass it on somewhere else, or whatever else would
    // be done with any other argument value.
});

bjornd · Accepted Answer · 2011-06-08 06:41:11Z

0

This function publicMethod(options, callback) {} is nearly but not completely the same as var publicMethod = function(){options, callback}. In first case you create function named publicMethod and in the second you create anonymous function and assign it to publicMethod variable. Other to assignations just save this function for the further use as API method.

answered Jun 8, 2011 at 6:41

bjornd

23k4 gold badges59 silver badges74 bronze badges

Collectives™ on Stack Overflow

Help understanding Javascript unusual function declaration syntax

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related