Filter() Method explanation

JavaScript
1

Tell us what’s happening:
Just a question about the const “users”: in example (user =>user.age < 30) the use of “user”. Is this the “callback”, parameter, or element? I searched online and found similar examples: array named “words” with element/param word.length. If someone can shed some light on how these are created/ how to better search the question. If my question isn’t clear, maybe “Does JS understand a plural noun Words is an array to which several Word elements belong? Or is Word not defined because it is the name of a parameter to make sense later in the code?” I see “Word/Words” often but what about “Cat/Cats”?

Your code so far

const users = [
  { name: 'John', age: 34 },
  { name: 'Amy', age: 20 },
  { name: 'camperCat', age: 10 }
];
const usersUnder30 = users.filter(user => user.age < 30);

console.log(usersUnder30); // [ { name: 'Amy', age: 20 },
 { name: 'camperCat', age: 10 } ]

Link to the challenge:

2

the word users is completely arbitrary and meant only for the human to understand. It could have been just the character u as well.

edit: whoops, I re-read that. The user part is as well a human readable term as well. It is the element name we assign to each element in the users object.

The filter works like a for loop. the user variable is essential the users[i] part in that for loop.

edit: more clarification. the filter code could be re-written like this:

for(let i = 0; i < users.length; i++){
  if(users[i].age < 30){
    usersUnder30.push(users[i]);
  }
}
1 Like
3 
user => user.age < 30

This is the callback function for .filter().
user is the parameter for the callback function.

1 Like
4

Ok thanks, that is what I thought. Good practice to make var names that make sense to humans. No need to define them because they fit into the array.prototype.filter() context.

1 Like
5

Hello there,

If you are not turned-away by lots of words and code, your best resource for understanding native JS methods and functions: Array.prototype.filter() - JavaScript | MDN

Specifically, the Pollyfill section shows the code to create the method.

For this specific example:

const usersUnder30 = users.filter(user => user.age < 30);

The following is both the argument, as well as the callback:

user => user.age < 30

For the above, user is a parameter of the callback function.

JavaScript has no clue about grammar. It is useful for humans reading the code to see: “Ah! users must be an array/object-literal, where there is one or more user inside.”

You could write the same with:

const usersUnder30 = users.filter(x=> x.age < 30);

And many programmers do.

As for researching this topic, here are some keywords:

  • method : kind of like a function - in this case filter is a method
  • argument : the value passed to a function
  • parameter : the variable extracted from the constructor of a function (do not be worried about this, if you do not understand it. Pretend constructors are invisible, but allow you to use the variable inside a function’s parentheses)
  • Eg:
function myFunc(parameter) {
  // the constructor works in the background to provide access.
}

// Call the function using an argument
let argument = 1;
myFunc(argument);

I hope this helps

1 Like
6 

for(let i = 0; i < users.length; i++){
  if(users[i].age < 30){
    usersUnder30.push(users[i]);// var user = users[i]
  }
}

thanks that really helps!

7

That helps a lot. I’ve been relying on those Mozilla pages a lot. The question seems kind of obvious now that its been answered. your reply made sense to a lot of confusion I have had reading the Solutions. I joked that to a beginner a lot of it reads like “magic words”: “str.toUpperCase(abracadabra)”. Thanks again for your help!