Could anyone please explain why this filter method only returns the true values?

[kiandreriley89]

const users = [
  {name: "shaun", premium: true},
  {name: "yoshi", premium: false},
  {name:"mario", premium: false},
  {name:"chun- li", premium: true}
];
 
const premiumUsers = users.filter((user) => {
  return user.premium ;
})
console.log(premiumUsers);

Im just curious as to why the filter method didnt return all of the values both false and true when the return is for user.premium and no distinction was made to actually filter out the false methods.

If I had to guess I would say that the filter method , when dealing with booleans automatically them as true unless they are false , but I am not sure.

[ArielLeslie]

The filter method evaluates the return value of the callback function as a boolean. If the returned value is truthy, the array item is kept. If it is falsy, the array item is removed. By returning user.premium it will remove the user if user.premium is falsy.

[samolex]

Exactly as said. Alternative could have been

users.filter({premium}) => premium) // destructuring and  filtering by premium

[kiandreriley89]

So if I am understanding correctly essentially the filter method or function is recognizing that the data type is a boolean and proceeding. Also , would I get the same result if the return keyword wasnt used ? (Like samolex suggested?)

None of my books or guides seems to cover this so it was confusing. I do understand that it is recognizing the value as a boolean , I guess I’m just wondering in what way would we know or the computer know when to view something as a boolean , and by what you are saying it seems like if cant be read as any other primitive data type then the computer just assumes it is a boolean and then acts accordingly because it is a truth value ?

[JeremyLT]

MDN has a good (in my opinion) explanation

Array.prototype.filter() - JavaScript | MDN

callback
Function is a predicate, to test each element of the array. Return a value that coerces to true to keep the element, or to false otherwise.

The return value of the callback is interpreted as a boolean value and only truthy results are retained. Falsy results are filtered out.

You would get the same result for equivalent syntax that represents the same logic. There are a bunch of different ways to write the same function in JS.

[kevinSmith]

@kiandreriley89

So if I am understanding correctly essentially the filter method or function is recognizing that the data type is a boolean and proceeding.

Technically it is coercing it to boolean. Anything that is falsy (false, 0, -0, 0n, NaN, undefined, null, empty string) then it accepts it as false - anything else is truthy and coerces to true. If it coerces to true, it is rejected, otherwise it is copied into the new array.

Also , would I get the same result if the return keyword wasnt used ? (Like samolex suggested?)

His example does have a return, it’s just an implicit return, as in an arrow function. You can read here.

I would just mess with the filter to get used to it.

What would these do:

const premiumUsers = users.filter((user) => {
  return !user.premium ;
})

const premiumUsers = users.filter((user) => {
  return user.name  === 'shaun';
})

const premiumUsers = users.filter((user) => {
  return user.name[1]  === 'h';
})

const premiumUsers = users.filter((user) => {
  return user.name[1]  !== 'h';
})

const premiumUsers = users.filter((user) => {
  return user.name.length  === 5;
})

const premiumUsers = users.filter((user) => {
  return user.name.length  !== 5;
})

Figure out what those do. Also, there is probably a good youtube video out there. I think videos can be a great way to explain concepts in coding. FCC even made a few.

[Sylvant]

if this will make it more clear for you: the filter method accepts a function as a parameter. It goes through array elements and only return those which pass its callback function as true. The map method is the one that could do what you suggest- return the modified elements, in your case returning only the premium value from users

[kiandreriley89]

@kevinSmith

const premiumUsers = users.filter((user) => {
  return !user.premium ;
})

This would filter out or return an array of the falsy values.

@kevinSmith

const premiumUsers = users.filter((user) => {
  return user.name  === 'shaun';
})

This would filter out or return an array of the value equal to the string “shaun”.

@kevinSmith

const premiumUsers = users.filter((user) => {
  return user.name[1]  === 'h';
})

This would filter out or return an array of the value equal to the string “h”

@kevinSmith

const premiumUsers = users.filter((user) => {
  return user.name[1]  !== 'h';
})

This would filter out or return an array of the value equal to everything that is not equal to the string “h”

@kevinSmith

const premiumUsers = users.filter((user) => {
  return user.name.length  === 5;
})

This would filter out or return an array of values with a length equal to 5.

@kevinSmith

const premiumUsers = users.filter((user) => {
  return user.name.length  !== 5;
})

This would filter out or return an array of values that are not equal to a length of 5.

Hopefully I got those right , thank you for the clarification as well, as I was mainly concerned with the type coercion.

[ilenia]

@kiandreriley89

This would filter out or return an array of the value equal to the string “h”

no, it would return an array with the objects for which the second letter of the name is an h

have you tried executing these codes?

[kiandreriley89]

@ilenia

turn an array with the objects for which the second letter of the name is an h

and that is what I get for not paying enough attention to detail . I actually just worked them out inside my head. The book that I am going through and others here have mentioned that the filter method receives a function that holds a condition and whatever value/element from the array being worked on by the filter method that meets the condition will be returned in an array. So I just applied that to the questions when I was answering them in my head. I did end up missing that the questions dealing with the ‘h’ were referring to the second letter in an value/element.

[ilenia]

in all the cases, the kept elements are not changed

each condition refers to the value of one of the object properties, did you notice that?

[kiandreriley89]

Yes if I am understanding your question correctly then as I understand it the filter method works its way through each value of an array that it is used on and determines whether or not said value meets the condition. In this example of using the filter method nothing would be changed in regards to the values/elements themselves. The only thing that would happen is that the values/elements that met the condition would be passed into the newly created variable, which in the above example would be “premiumUsers”.

[kevinSmith]

Right, it’s cool that you are trying to work it out in your head but I was also hoping you would pull up a JS environment and give it a shot. I wasn’t looking for answers, but whatever it takes.

Prototype methods are kind of weird when you start learning them. I really didn’t understand them or what callback functions were doing until I decided to write my own versions of filter, map, reduce, find, etc. After that, they all made sense.

[kiandreriley89]

oh gotcha , sorry about that . I will definitely go through a few more examples of them. I think I have the concept down for the most part, but I will pull it up in an environment as well to clear up any issues I may have.

Thank you for your help , I appreciate it.