.filter function

JavaScript
1

What does .filter function does and what is it’s syntax and usage ?

2
1 Like
3

How can it be combined with arrow function as it itself uses arrow ?

4

Hi Manav. I’m new to programming but I will try to help! A filter will filter elements from an array and create a new array with the filtered elements. So like the first example from Mozilla…

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

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

Filter will go through each ‘word’ (word) from the array and only return (=>) elements as stated by the function ‘words whose length is greater than 6’ (word.length > 6). Each word it finds will then be stored in (result). I hope this helps!

1 Like
5

Can i take as right side of => is condition to return values that pass it ?

6

Yes, if I understood your sentence correctly, everything past (=>) is basically the condition the element must pass. :smile:

1 Like
7

Thanks for helping me out and i love unusual sentence structures…:grin:

1 Like
8

Glad to help! And no biggie. Hahaha.

9

the concept is easy to understand but doing it is much more confusing. I’m working on a filter problem in functional programming in Javascript and came across a problem in the question.

this is the question: Use the filter method to extract data
The variable watchList holds an array of objects with information on several movies. Use a combination of filter and map to return a new array of objects with only title and rating keys, but where imdbRating is greater than or equal to 8.0. Note that the rating values are saved as strings in the object and you may want to convert them into numbers to perform mathematical operations on them.

this is the answer:

// Add your code below this line

var filteredList = watchList.map(function(e) {
  return {title: e["Title"], rating: e["imdbRating"]}
}).filter((e) => e.rating >= 8);

console.log(filteredList);

my question is what does the “e” mean? When am I supposed to use brackets vs the squigly brackets? Why is it filteredList instead of just watchList? I’m confused at most of the problem. If you can help me it would be a big help.

10
  1. e is just the name the person who wrote the solution gave to that function argument, it could be x or foo. Or it could be given a name that represents what it is, film maybe, which would probably make things a clearer.
  2. The function is returning an object, and objects are define like { foo: 1, bar: 2 }. So the map function is saying "take the current object in the watchList array, and create a new object like {title: someTitle, rating: someRating}.
  3. watchList is the original thing you’re filtering. You could overwrite it like watchList = watchList.filter.... map/filter/etc all return a brand new array, so this is just saying "assign the new array you get by mapping and filtering watchList to the variable filteredList.

Edit:

function filter(array, callback) {
  let output = [];

  for (let arrayItem of array) {
    if (callback(arrayItem) === true) {
      output.push(arrayItem);
    }
  }

  return output;
}

So say you have an array like:

const films = [
  {title: "Titanic 5: Jack's Revenge", rating: 2},
  {title: "Star Wars Episode XXI", rating: 5},
];

You could use that filter function like:

filter(films, function (film) { return film.rating > 2 });

And if you walk through the filter function:

output is []
first item in array:
call the callback function.
It checks if the value has a property
called rating, and if that is
greater than 2, push
the item to output.
"Titanic 5" does not have
a rating greater than 2.

output is []
second item in array:
call the callback function.
It checks if the value has
a property called rating,
and if that is greater than 2,
push the item to output.
"Star Wars Episode XXI" does
have a rating greater than 2.
Push it to output array.

output is [{title: "Star Wars Episode XXI", rating: 5}].
No more elements in the array,
return output
1 Like