Could anyone help me?

[JohnT]

There's been a few things I have been struggling with since the beginning, and rather than dance around them, I better ask.

Dustin recently wrote an article on "chaining" , and I notice Jack does this all the time. I almost got the grasp of this, but I would love to see a simple example of this without using any libraries. Is that possible?

Unless I am mistaken, this is using the return value of a function within a function, etc. Is that right?

Also, I notice that people use the toString method with their functions. Why do you do this? Why do you return the function as a string?

Can you guys help me out? As you may be aware, when you are in the intermediate zone of learning Javascript, as I am, it appears the tutorials either are way too basic, or far too advanced.

I am about to start a new job, and really would love to understand the above, know what I mean?? :)

Thanks,

JohnT

[BernardChhun]

here's a simple chaining example...at least I think it is one...

I want to extract the last element of a string. The string is composed of strings and a separator character. let's say it's a slash.

so using a one line instruction to get it would look like:


var myString = "e/x/t/r/u/l/e/s/!";

alert( myString.split("/").pop() );

the myString.split("/") part turns the string into an array that would look like


["e","x","t","r","u","l","e","s","!"]

the pop() function removes the latest array element.

thats it for a simple one. :)

[JohnT]

cool... i think i see.

If you wouldn't mind, can you see if you can make this make sense:


1. a function returns an element reference

2. the second chain function returns the innerHTML of #1

and 3

3. the last chain alerts #2

would it be like this:




var el = getEl("myDiv").mySecondFunction().lastFunction();



???? Am I on the right track?

[BernardChhun]

yup thats it. using the getEl function is a good example.

I used to work with JQuery before and we can make a lot of chaining with that library too :)

Chaining can go a really long way too. Not just 2 functions.

[JohnT]

Ok cool, I am on the right track.

But what's with all this returning function as a string using toString?

Like in Dustin's example:




var guids = function() {
return Dom.query('#product-list input[type="checkbox"]').filter(
function(el) {
if ( el.checked == true ) {
return el;
}
}
);
}().map(
function(el) {
return el.value;
}
).toString();

console.info('my guids are:', guids);




I ask here because he has no forum.

Thanks

[brian.moeskau]

John, just think of the same code as if it were broken into several statements. This code...


var zip = person.getInfo().getAddress().getZipCode();
is functionally equivalent to...


var info = person.getInfo();
var addr = info.getAddress();
var zip = addr.getZipCode();
Chaining is simply calling a method on the object that is returned by the previous function in a shorthanded manner.

[brian.moeskau]

And to take your last example, compare the code you pasted to this:


var els = function() { return Dom.query( ... ;
var map = els.map( function( ... ;
var guids = map.toString();
This particular example may be a bit over the top -- the point of chaining is convenience, but this code is arguably more complicated than if it were simply broken out as separate statements. The real power is in doing stuff like:


Ext.get('myId').shift(100, 100).highlight().pause(1).fadeOut();
That's a lot simpler than having 5 lines of code to do the same thing.

[JohnT]

That's it. That's the example I needed in order for it to make sense. Awesome, Brian!

Ok, so again, what is all this returning function toString? What purpose does that serve?

[brian.moeskau]

Hey John,

Read through my last post again and follow the chain of what's happening. There is no "function toString." What's happening is that the first function you see returns an object (an array of elements). That array then has map() called on it (which executes a function on each item in the array and then returns the results as a new array). Finally, the returned array object has toString() called on it which will spit out the array contents to a string.

Look at the example code I pasted, and follow along with the description I just wrote and see if that's making more sense. :)

[JohnT]

Yes, your example makes sense.

Specifically I am trying to figure out: http://www.dustindiaz.com/javascript-chaining/

You'll notice a quote:



The mapping will take the value property from each, and return those. Once all the loops have finished, we call the Array object’s toString method (which is inherited from Object’s toString method).


I can't remember which example it is, but Jack also referred to a return value of a function that was "toString". Am I making sense? probably not. I will try to find the specific example in the meantime.

[brian.moeskau]

Hmmm. I think you lost me. "a return value of a function that was "toString"" does not make much sense to me. "A return value of a function that was an object on which the toString method was then called" sounds a lot better though :)