CODEWITHSUNDEEP
javascript
proxima
proxima

Reputation: 11

Clarification on filter() function; how it works

So, I am self-learning HTML, CSS, JavaScript. I was going through arrow functions and found the following code on MDN website but I am not sure if I understand it clearly how the filter() function works. This is how I understand it: the "word" is the parameter of testFunct() and the arguments are the elements of wrds array and they are passed to testFunct(word). Is it like filter function loops through each elements of the array(arguments) and assesses the requirement(word.length > 6)? Like with normal(to me that's normal as I am a beginner) argument/parameter pair, let's say you pass 2 arguments and there are 2 parameters to receive them. Thank you.

var wrds = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

//const result = words.filter(word => word.length > 6);

//write the arrow function as full function to see if you understood how it works. 

const result = wrds.filter(function testFunct(word) {return word.length > 6;});

console.log(result); 



 prints 'exuberant', 'destruction', 'present

Upvotes: 0

Views: 69

Answers (3)

vahdet
vahdet

Reputation: 6729

The polyfill on the very same MDN page represents the algorithm exactly equivalent to the one specified in ECMA-262, 5th edition:

if (!Array.prototype.filter){
  Array.prototype.filter = function(func, thisArg) {
    'use strict';
    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
        throw new TypeError();

    var len = this.length >>> 0,
        res = new Array(len), // preallocate array
        t = this, c = 0, i = -1;
    if (thisArg === undefined){
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func(t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
    else{
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func.call(thisArg, t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }

    res.length = c; // shrink down array to proper size
    return res;
  };
}

So, yes it iterates the array with a while loop.

Upvotes: 1

Jalil
Jalil

Reputation: 1246

The function filter is like a for loop, that takes each element of the array and filters it with a function. Let's say: 

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

That takes 'spray', then limit, then elite and so on

spray.length > 6 = false 
limit.length > 6 = false 
elite.length > 6 = false 
exuberant.length > 6 = true
destruction.length > 6 = true
present.length > 6 = true

Takes all trues and remap them in the new array

Upvotes: 0

Quentin
Quentin

Reputation: 943207

Is it like filter function loops through each elements of the array(arguments) and assesses the requirement(word.length > 6)?

Yes. (For a value of "assesses" equal to "Calls the function with the array element as an argument and tests the response for truthiness).

let's say you pass 2 arguments and there are 2 parameters to receive them.

The only argument you pass is the argument to filter() which is a function.

It is filter() that calls that function, it passes three arguments (the current array element, the index of that element, and the whole array).

Upvotes: 0

Related Questions