Invoke several functions to the same variable in JavaScript

Question

Is there a way to call multiple functions on the same object in JavaScript ? Something like this :

element
    .html('test'),
    .css('color', 'green');

Instead of :

element.html('test');
element.css('color', 'green');

EDIT : Thanks for your answers. I didn't know those jQuery functions returned the object it was called on so I could chain them. Although, my question was more like asking an equivalent for, let's say, VB .Net With syntax :

With object
    .Function1()
    .Function2()
End With

Depends on the method. It has to return the object on which it was called for that to work. The effect is usually referred to as "chaining". — James Allardice
– James Allardice, Commented Sep 5, 2014 at 13:49

T.J. Crowder · Accepted Answer · 2014-09-05 13:50:11Z

This is called method chaining. It's possible if the method you're calling returns the object reference, and not if it isn't. (But you want to remove the , after the first call.)

So it would work with this, for instance:

function Thingy() {
}
Thingy.prototype.html = function(value) {
    // ...do something with `value`...

    // return `this` for chaining:
    return this;
};
Thingy.prototype.css = function(name, value) {
    // ...do something with `name` and `value`...

    // return `this` for chaining:
    return this;
};

var t = new Thingy();
t.html('test')
 .css('color', 'green');

Most of jQuery's functions, for instance, return this for chaining purposes when used as setters (if you're using jQuery, as it seems you might be from the names of the functions you quoted). (When they're used as getters, of course, they return the value you're getting rather than this.)

But it won't work if the function doesn't return the object reference:

Thingy.prototype.html = function(value) {
    // ...do something with `value`...
};

t.html('test')
 .css('color', 'green'); // Fails, because what `html` returned wasn't an object

sma · Accepted Answer · 2014-09-05 13:50:00Z

1

Are you using jQuery? The way that works with jQuery is through method chaining. Each of those functions (html, css) returns a jQuery instance where you can invoke the next method on the instance.

So, long story short, yes, you can do this in any language really, its all about what the function returns so that the next one can invoke a function.

answered Sep 5, 2014 at 13:50

sma

9,5978 gold badges53 silver badges83 bronze badges

Comments

Nick Zimmerman · Accepted Answer · 2014-09-05 13:52:36Z

0

You can chain operations on a single object like this:

element
.html('test')
.css('color', 'green');

The caveat is that each method is invoked on the return value of the previous method, so in jQuery where you get an object returned, this can work well, but if you invoke a method with no return value, things can get weird.

The only error in your first code block was the comma between the .html() call and the .css() call.

answered Sep 5, 2014 at 13:52

Nick Zimmerman

1,54911 silver badges11 bronze badges

Collectives™ on Stack Overflow

Invoke several functions to the same variable in JavaScript

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