How Does Filter() Recognize Unnamed Objects in an Array?

JavaScript
1

I am learning the filter() method for an array of objects. (Specifically, I am on the lesson Functional Programming: Use the filter Method to Extract Data from an Array) [https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/functional-programming/use-the-filter-method-to-extract-data-from-an-array]
In the example, it says:

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 } ]

How on earth does the computer know what “user” is when it’s looking for user.age?! Furthermore, if the objects in an array are not named and I don’t want to use arr[i] to iterate through them but would rather use map() or filter() to extract certain properties only, how does this mechanism work and how does the computer know where to look?

Thank you!

2

maybe if you change the way to code filter the you could understand how works .
you code:

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

Other way:

const usersUnder30 = users.filter(function(user){
    if(user.age < 30){
        return true
    }

    return false
})

each object is inject to the function and filter wait the result (true or false) and save the true one.

3

filter() is an array method, so it iterates over users array where each “user” equals to

{ name: 'John', age: 34 } and
{ name: 'Amy', age: 20 } and
{ name: 'camperCat', age: 10 } one by one.
It enters every object in array (every user) and checks if any user.age is less than 30.
Then it creates new array with objects = users that satisfy this condition.

4

So in this case, “user” is just an argument put into the function? That does help a lot. I’m still trying to figure out how the computer recognizes what “user” corresponds to when the function is called.

5

how does it know what “user” is? “User” was never declared.

6

think like this

1st iteration
const usersUnder30 = users.filter({ name: 'John', age: 34 } => { name: 'John', age: 34 }.age < 30);

2nd iteration
const usersUnder30 = users.filter({ name: 'Amy', age: 20 } => { name: 'Amy', age: 20 }.age < 30);

3rd iteration
const usersUnder30 = users.filter({ name: 'camperCat', age: 10 }=> { name: 'camperCat', age: 10 }.age < 30);

do not think of “user” word as something that out of this universe, “user” here represents each object in array

7

but how does the computer know that each object is called user? That’s my question. Because on other assignments with objects, I get very confused on how to locate specific properties on specific objects within an array without referencing the array index location of the object. And giving objects a random name just returns “undefined.” Could you use any random word here instead of user and it will still work?

8

user is declared users.filter(function(user){ return user.age < 30});

and it does not have to be “user” word.
below examples will give you the same result.

users.filter(pumpkin=> pumpkin.age < 30);
users.filter(cat => cat.age < 30);
1 Like
9

Ok, so it is declared in the function. Thank you so much!!

1 Like
10

Hi @EdenSweden !

I am going to link mdn docs so you can see more examples of filter.

Happy coding!

2 Likes
11

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like