Getting Complicated

Once again, this is all there is to chaining - just make sure you return the correct object for the next function to have the correct context. If you want to be sophisticated then you don't always have to return the same object and, as already mentioned, this would be appropriate for a search method, say, that returned different types of object.

One problem with chained function calls is what do you do about the result of a function? After all, you can't return it because to support chaining you have to return a suitable object. The answer is that the object you return has to be both the context for the next function call and incorporate the result of the function.

That is, if you want to implement an API in a fluent style then you have to create an object which not only hosts the methods you want to chain, but which stores what would have been the results of these operations as its internal state. Let's take a look at some examples.

Initialization

One common use of function chaining is to create a fluent interface to initialize an object. You can initialize everything using the constructor, but this often results in a constructor that is very difficult to use. Providing set functions that can be chained produces a neater and more flexible initialization API. For example, suppose you have an address object which holds a person's details, then you could define the constructor as:

var AddressConstruct = function () {
            this.name;
            this.number;
            this.age;
            this.setName = function (name) {
                this.name = name;
                return this;
            };

            this.setNumber = function (number){
                this.number = number;
                return this;
            };

            this.setAge = function (age) {
                this.age = age;
                return this;
            }
        };

Following this definition you can write things like:

var add = new AddressConstruct();
add.setAge(24).setName("Ian").setNumber(1);

Once you have seen the basic method you can see that it is possible to extend the idea to include methods to modify values that have already been set. For example, you could have an addAge method which increments the age field and so on.

A DSL For Calculation

As an example of how function chaining can become a DSL, Domain Specific Language, consider the task of implementing a calculator or math API. JavaScript already has the Math object, which provides many standard functions, but this is an example of how it could have been done.

The first problem we have to solve is that, unlike a non-fluent approach to calculation, our functions cannot return the result of the calculation. In fact, the result has to be stored as the state of the calc object. This is another common pattern in using function chaining - what used to be a result often has to be built into the object's state.

The constructor is:

var CalcConstruct = function () {
      this.value = 0;
      this.square = function () {
       this.value = Math.pow(this.value, 2);
       return this;
      };

      this.sqrt = function () {
       this.value = Math.sqrt(this.value);
       return this;
      };

      this.display = function () {
       alert(this.value);
       return this;
      };

      this.setValue = function (value) {
       this.value = value;
       return this;
      };

      this.times = function (times) {
       this.value = this.value * times;
       return this;
      };
    };

Notice that all of the functions work with this.value and return this.

The range of operations is quite small - square, sqrt, times, setValue and display. Even so, you can now write calculations that look fairly impressive, for example:

var c = new CalcConstruct();
    c.setValue(100)
     .sqrt()
     .display()
     .square()
     .display()
     .times(3)
     .display();

You can see that it does start to look like a program in a special language.

This final example is a little more realistic, but it hardly starts to dig into the sophistication you can invent - and JavaScript is ideal for this sort of elaboration. For example, if you make the internal state of the object a collection, you can introduce functions which select and even enumerate on the collection. You can arrange for functions to return different types of object to implement conditionals and so on. You can also pass functions within methods to determine what happens.

For example:

c.apply(sin).reduce(sum);

could be implemented to apply the sin function to each member of the collection and then perform a reduction on the collection using the sum function, i.e. form a total of the values in the collection.

If you want to see more examples of using the fluent style then see jQuery or LINQ both of which take function chaining as key design principles. 

Now available as a book from your local Amazon.

JavaScript Jems:
The Amazing Parts

Contents

• Jem 0 Why JavaScript Is A Jem
• Jem 1 JavaScript Is Classless
• Jem 2 The Inheritance Tax ***NEW!
• Jem 3 Functions Are Objects 
• Jem 4 Objects, Functions And this
• Jem 5 Every Object Is An Anonymous Singleton 
• Jem 6 Objects Have Value
• Jem 7 Numbers And Other Values
• Jem 8 Truthy And Falsey
• Jem 9 The Comma  
• Jem 10 Code As Data
• Jem 11 Lambda expressions
  
• Jem 12  Fluent Interfaces
  
• Jem 13 Hoisting, Scope And Lifetime
• Jem 14 Amazing Async
• Jem 15 The Revealing Constructor Pattern
• Jem 16 Functional And Not Quite Functional
• Jem 17 Immutability
• Jem 18 Functional Approach To Iteration
        Extract 1 Functional Iteration
• Jem 19 Metaprogramming - The Proxy
        Extract 1 The Proxy

<ASIN:1871962579>

<ASIN:1871962560>

<ASIN:1871962501>

<ASIN:1871962528>

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.