Understanding javascript function calls in format of myFunc(arg).something()

Question

I'm trying to understand the format of the Javascript functions that jQuery, among other people, use.

For instance jQuery(arg).hide() or $("#obj").hide

I'd like to write similar format functions but I don't understand how.

I know how to write

function myFunc(args) {
}

but I don't understand the second part ie the .hide() is that a function within a function?

thanks for any help

Answer 1

.hide is a function that's part of the object that's returned by $("#obj"). You need to look into object oriented Javascript first ;)

Answer 2

It's called method chaining. The way to achieve this is for your first function to return an object, so the second function can be called as a method on that object.

The standard way to do this style of programming is to always return the same type of object, so for example, jQuery always returns a jQuery object representing a collection of HTML nodes. If one of the calls modifies the collection then the next call will be on that collection. That's how you can do something like $('#myid').parent().hide();. $('#myid') returns a jQuery object representing the #myid element and .parent() returns a jQuery object representing the parent element of #myid. .hide() returns the same object, so you could then call another method on the same object if you wanted.

Answer 3

This is called method chaining. I highly recommend picking up Crockford's "JavaScript: The Good Parts". This is a very quick read but wonderfully explains OOP in JavaScript and identifies good versus bad language features. Highly recommend it.

Answer 4

As Skilldrick pointed out, this is called method chaining.

The most straightforward example for this is an object that returns itself when you call any of its methods:

var world = {
    'hello': function() {
        alert('Hello');
        return this;
    },
    'goodbye': function() {
        alert('Goodbye');
        return this;
    }
};
world.hello().goodbye();

This is identical to world.hello(); world.goodbye();.

jQuery does a little more than that. Calling the jQuery or $ function on a valid selector string will return a jQuery object representing the matched elements (it's not actually an array, though you could think of it as one). Most of its methods will return the object itself after modifying the object (e.g. $("a").css({...}) will apply changes to the styling of the matched elements and then return the set of matched elements again).

But some jQuery methods allow modifying the set you're working with (e.g. $("a").parent() will return a jQuery object representing the parents of the matched elements). That is, they don't return the same object, but an object that behaves identically.

You have to be careful if you decide to use this style, though, as the flow will break if you need a method that has a return value of its own (e.g. if you want calculations or getter methods). This can be avoided by passing a callback function to the method, but the resulting coding style may be terribly convoluted.