Method Chaining

Muhammad D. Ramadhan
Pull Requests
Published in
2 min readJan 2, 2017
Chaining hand in hand 助けあいジャパン情報発信本部 (Official YouTube account of 助けあいジャパン 情報レンジャー)

Have you ever encountered code like this?

Does it look like English sentence? It seems that no comments or explanations required, right? One single line of code that explains itself.

That’s it. Calling multiple methods on the same object consecutively is called method chaining.

Okay, enough theorizing. I am told that Naruto gain mastery of Senjutsu and Rasengan by deliberately practicing it without paying too much attention to theories and explanations. We are going to use his methodology right now.

Let’s open Firebug or Chrome Developer Tool. Get our hands dirty from the beginning. We are going to make our own!

Please type each of these manually in Firebug/Chrome Developer Tool. Try to figure it out yourself, just simple guessing will do. I will explain it later. Make sure you open Firebug/Chrome Developer Tool in new tab next to this writing.

Jolly good! With a slight glimpse, you might notice lots of this throughout the code, right? Now, we have to read this to learn about this (pun intended). It requires approximately 40 minutes to digest the author’s explanation. After we are comfortable with this, I am sure this stupid example can be easily understood. Here’s a good quote:

“Usually, there is nothing more pleasing than returning to a place where you have endured hardship.”
Tahir Shah, In Search of King Solomon’s Mines

Come back here when you are ready. Happy reading!

Great! I know you are smart! I am sure you are already confident with this. this is not literally “itself”, there are ways to change the context by invoking function executed by object with apply, call or bind like this:

In Firebug/Chrome Developer Tool, look at the code you’ve just typed before. Read line 15–17.

It’s a function, but that’s no ordinary function, it’s a constructor. Constructor is a function that will create new object when invoked. Here’s the way we create newly made object:

In console, run this snippet:

Can you guess how it works?

That’s right! Every method we add to constructor via prototype returns this, so the enumerable properties of object that calls the method is made accessible. Simply put, whenever you invoke a method the object owns, it will return the object itself. We don’t have to do it this way:

Even more, we can append this snippet to our existing code, so we can purchase multiple vouchers:

Here we are! We dynamically purchase multiple vouchers. Each of which with its own unique options:

Congratulation! You just implemented method chaining.

However, if some of you find it hard and confusing, this is my personal approach to learn something. Learn Python The Hard Way and Learn Ruby The Hard Way are the best programming books I’ve ever read.

Don’t worry, confusion incites understanding. Confusion sounds like Confucius. Amitābha.

--

--

Muhammad D. Ramadhan
Pull Requests

I am a boring person, doing boring thing, using boring technology that power most of boring products