Question

I’m sorry if this question has been asked before, but I’m not even sure what search terms to use to find the answer and when I try to search I never get anything specific to this question.

I’m using Javascript and I am wondering if it is possible to do something like this:

find(x);             // find a document (for example)
find.inFolder(y);    // find a folder's documents (for example)

In other words, can I have a function that can also be used as an object/class? I know I could run find() once and return a hash so that find.inFolder() would work, but I’m hoping there’s a way where I could continue to call find().

Can it be done with prototype? (my “prototype” knowledge is very limited)

function find() {}
find.prototype.inFolder = function() {}

Can it be done inside a hash? [I know this code doesn’t work]

var find = {
    () : function() {},
    inFolder : function() {}
}

To push it even further, is there a way to have the results of .inFolder() be sent to the find() function this way:

find().inFolder();

I know you might say that I don’t understand the concept of javascript, and you’d be mostly correct, but I’ve seen people do some pretty amazing stuff with JS so I thought I’d ask the pros out there.

Thanks in advance for any help.

Answer 1

What you’re describing is a Fluent interface (if you want something to search for). You could accomplish something like what you’re trying to achieve like this:

var find = function() {
    this.inFolder = function() {
        return this; // Although to stop chaining, you could return nothing here.
    };
    return this;
};

find().inFolder(); // .inFolder().inFolder()...

This is a great pattern, especially when leveraged in projects like jQuery:

$("#element").find(".child_element").first();

Each call returns a jQuery object with .find(), .first() and many other functions, which lets you write intuitive and fluid code.

---

I kind of liked your find().inFolder() example, so here’s an expanded version:

var find = function(file) {
    this.folders = {
        "Documents": ["Foo.txt", "Bar.txt"],
        "Downloads": ["File.exe"],
        "Misc": ["Picture.jpg"]
    };

    this.file = file;

    this.inFolder = function(folder) {
        var files = this.folders[folder];
        return files.indexOf(this.file) >= 0;
    };
    return this;
};

alert(find("Foo.txt").inFolder("Documents")); // True
alert(find("File.exe").inFolder("Downloads")); // True
alert(find("Picture.jpg").inFolder("Downloads")); // False

http://jsfiddle.net/andrewwhitaker/TCdTd/