Understanding The Double Return Operation is Javascript

Question

Hey guys, I'm new to JS and basically learn new stuff every day, I just learn things like dynamically updating the array and stuff, anyway I usually try to pick up clean pieces of JS network and debug them until I understand what does it really mean. so here is the snippet I found today:

var array1 = [ { tagId: 1, tagName: 'tag 1' }, { tagId: 2, tagName: 'tag 2' }, { tagId: 3, tagName: 'tag 3' }, { tagId: 4, tagName: 'tag 4' } ]; var array2 = [ { tagId: 1, tagName: 'tag 1' }, { tagId: 2, tagName: 'tag 2' }, { tagId: 8, tagName: 'tag 8' } ]; var array3 = [ { tagId: 1, tagName: 'tag 1' }, { tagId: 0, tagName: 'tag 0' }, { tagId: 9, tagName: 'tag 3' }, { tagId: 12, tagName: 'tag 12' }, { tagId: 13, tagName: 'tag 3' }, { tagId: 14, tagName: 'tag 2' }, { tagId: 6, tagName: 'tag 6' }, ]; var a4 = common(array1, array2, array3) console.log(a4); function common( /*…*/ ) { var a = arguments; res = a[0] for (var i = 1; i < a.length; i++) { res = res.filter(function (el) { return a[i].filter(function (el2) { return el2.tagId === el.tagId }).length }) } return res } 

basically a fragment goes through arrays with object literals in them and filters them out. Now, my question. being new to JS, I came across an interesting example that many of the JS code uses the return in quick succession, or rather, one by one, they are often nested, this is a very interesting case for me, because I usually assume that one expression of return should be all necessary.

anyway, back to my example and what is my difficulty, if you see the code inside the common function , you will see the code below:

 res = res.filter(function (el) { return a[i].filter(function (el2) { return el2.tagId === el.tagId }).length }) 

I really don't understand the double refund instructions. I understand return el2.tagId === el.tagId returns true or false and returns

 a[i].filter(function (el2) { return el2.tagId === el.tagId }).length 

returns the length, which I think should be an integer, but what is the order in which the return is performed? who return el2.tagId === el.tagId returns to ??,

I am always perplexed when I see the expression of double return, can someone explain this to me, please?

jsfiddle here .

EDIT :: try and come up with your answer a bit.

Thanks.

Alex Z

Answer 1

Those "double" returns are nested in anonymous functions; they do not return from the same context.

Work from the inside out:

 return el2.tagId === el.tagId 

returns a boolean value from an anonymous function in the filter() a[i] method:

 a[i].filter(function (el2) { return el2.tagId === el.tagId }) 

The length of the result of this expression is returned in an anonymous function in the filter() res method:

 res = res.filter(function (el) { return a[i].filter(function (el2) { return el2.tagId === el.tagId }).length }) 

Note: the length property of the result is forced into the boolean filter() value.

filter() is an Array prototype method, it creates a new array consisting of elements for which the provided anonymous function returns true (see MDN: Array.prototype.filter )

Answer 2

Javascript follows a functional paradigm. Think of functions as different bodies of code. For example, the two below are equivalent.

 var sum = 0; [1,2,3].filter(function(el) { return el > 2 ? true : false; }); 

Same as

 var moreThan2 = function(el) { return el > 2 ? true : false; } [1,2,3].filter(moreThan2); 

Javascript uses functions to create consolidated pieces of logic. In a lot of code, javascript developers use an anonymous function that does not get variable bindings.

edits

 function common( /*…*/ ) { var a = arguments, filterListForTagsWithMoreThanOneMatchingElement = function(el) { function findTagsWithSameTag(el2) { return el2.tagId === el.tagId; } return a[0].filter(findTagsWithSameTag).length; }, res = a[0] for (var i = 1; i < a.length; i++) { res = res.filter(filterListForTagsWithMoreThanOneMatchingElement); } return res } 

One note about code is that the filter function has an internal function that is based on closure. Closing is an area created by a new function.

It seems you are interested in learning the functional aspect of javascript. I would recommend a book called eloquent javascript . Unlike many javascript books, it tries to focus more on the functional side of javascript. This is deeper than I can in this matter.