Question

Coming from C++ and Java, I am a beginner with Javascript. This code pattern confuses me (found in a jQuery Application):

var opts = { drop : empty};

function drop(arg){
    opts.drop(arg);
    //do something
}

How I would read this:
The object opts is created and the attribute drop is declared, but initialized as empty.
Then, the function(-object) drop is defined. In the second line, the drop-attribute of the opts object is called as a method. But, in my understanding, opts.drop is empty. So it should not be callable.

What happens here? Am I missing some important code, or is this a pattern that makes sense?

EDIT: Source: https://github.com/weixiyen/jquery-filedrop/blob/master/jquery.filedrop.js

Answer 1

empty is likely the name of a function, which is implemented like:

function empty () {}

If it were null, undefined, a string, an object, an array, etc… …then there’d be reason to be concerned, because that would end poorly.

But my gut tells me that if you look for its definition, empty === function () {}

For added confusion, if empty is defined as an assignment:

var empty = function () {};

That assignment must happen above where it’s being referenced in opts.

If, however, it’s a declaration:

function empty () {}

that function could be declared anywhere, including the bottom of the script, because function-declarations are compiled before anything else in the script.

EDIT

Doing a quick check, I’m seeing a few different empty functions at different scopes.
Some are removing callbacks from an array (by setting the array to an empty one), some are removing HTML elements from a parent, and some are checking if an element has any child elements.

Of course, I’m viewing the minified source from this site, so there may be more empty functions out there.