the filter method of array

johnmerlino · 06-14-2010, 01:08 AM

Hey all,

Quick question. I was reading this book art/science of javascript and it defines its own custom filter method:

Code:

if (!Array.prototype.filter) { 
	Array.prototype.filter = function(func, scope) { 
	scope = scope || this; 
	var list = []; 
	for (var i = 0, l = this.length; i < l; i++) 
	if (func.call(scope, this[i], i, this)) list.push(this[i]); 
	return list; 
	} 
}

I honestly don't understand this line right here "if (func.call(scope, this[i], i, this)) list.push(this[i]); " and what contribtues to that is that the book doesn't provide an example of the filter method being used. So I was wondering if anyone can provide a practical example of how to use this method.

Thanks for any response.

Dormilich · 06-14-2010, 05:09 AM

Explanation of Array.filter() @ MDC

johnmerlino · 06-14-2010, 06:38 PM

I found another similar example, but notice how the call is sending for arguments: fun.call(thisp, this[i], i, this);
Yet the function (which is invoked by call()) is only receiving three arguments:
printBr(element, index, array)

How is this possible?

Also, why would we be passing the second index of the array right here: var thisp = arguments[1];
I don't see the point of that.

Code:

<html>
<head>
<title>JavaScript Array forEach Method</title>
</head>
<body>
<script type="text/javascript">
if (!Array.prototype.forEach)
{
  Array.prototype.forEach = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
        fun.call(thisp, this[i], i, this);
    }
  };
}

function printBr(element, index, array) {
  document.write("<br />[" + index + "] is " + element ); 
}

[12, 5, 8, 130, 44].forEach(printBr);
  
</script>
</body>
</html>

Dormilich · 06-15-2010, 09:33 AM

do you know how the Function.call() function works?

parameters 2 to 4 are passed to the function called, parameter 1 is used by .call() itself.

rnd me · 06-15-2010, 08:57 PM

Quote:

Originally Posted by johnmerlino

Also, why would we be passing the second index of the array right here: var thisp = arguments[1];
I don't see the point of that.

you aren't. you are specifing what this means in the 2nd argument to filter.

for example, we can use "this" as an extra argument to help create generic functions:

Code:

function gt(a){ return a > this ; }

var r=[1,2,3,4,5,6];


alert( r.filter(  gt,  3  ));

in this example, the array r is just some numbers.
the comparator function gt returns true if it's this is less than it's argument.

by mapping gt to the array in a filter method, we remove all elements whose value is less than this.

when i set this to 3, (by passing a 2nd arg to filter), the alert shows "4,5,6"; the numbers that are greater than 3.

does that make sense?

johnmerlino · 06-17-2010, 02:31 AM

So basically:

i = to the index number
this[i] = equal to the integer or DOM element
this = equal to the array
pthis = equal to a specific integer or DOM element in array depending on what we passed from the arguments method - arguments[1] will pass the second index value.

Is this correct?
Thanks.

Dormilich · 06-17-2010, 07:23 AM

thisp is the object that this inside fun will point to.
this[i] is the i(th) Array element/item

if you don’t declare the thisp parameter in the function call (it is commented out in the example), you have to get it another way, that is by using the (internal) variable arguments holding the parameters passed to the function.