Freecodecamp: Falsy Bouncer kluge coding

[Quotidian01]

Challenge Falsy Bouncer has an issue.
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:48.0) Gecko/20100101 Firefox/48.0.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

function bouncer(arr) {
  // Don't show a false ID to this bouncer.
 function notFalse (item) {
   var x = typeof(item);
//   console.log(" item " + item + " x-typeof " + x);
//   if (x === "number")
//     if (!item)
//       item =0;  // force NaN to be 0


   if (item === false) {
     return false;
   } else if (item === "") {
     return false;
   } else if (item === null) {
     return false;
   } else if (item === 0) {
     return false;
   } else if (item === undefined) {
     return false;
   } else if (x === "number" && isNaN(item)) {  // "a" would fail this test without === number
     return false;
   } else {
     return true;
   }   
 }


var newArr = arr.filter(notFalse);      


  return newArr;
}

bouncer([7, "ate", null, false, 9]);

---

My comments:
This was a challenging exercise. I have read the other comments in this forum and understand that this is a borderline bug/quirk of JS coding that is unlikely to change.
The "falsy" concept is not monolithic when it comes to testing for all the possible falsy values. NaN is the exception and should only be applied when the typeof (item) === "number" whereas the other falsy concepts can be tested regardless of object type.
I wonder if the typeof () function should be added to the the helpful links on this challenge?
I also wonder if it would not be better to test for the falsy concepts AFTER determining the object type, for all falsy results?
Main issue here is that the function isNaN(x) will return true for any string/character values tested (probably boolean as well but my code tests for the boolean falsy prior to the NaN test).

I know I should likely be using the chat/help function for this and while new at freecodecamp I expect to be up and running on github shortly.

[systimotic]

Hi @Quotidian01! Thank you for reporting this issue.

I see a lot of users taking an approach like yours. From reading the MDN page linked there, I would go with a solution that is quite different. Converting the value to a boolean will sort things out for you.

I can see why so many people go with a solution like the one you shared. The description states:

Falsy values in JavaScript are false, null, 0, "", undefined, and NaN.

Which would suggest that you need to check for those values.

I think the description could be improved to push campers in the direction of the simpler solution. I'm not certain what a good way to modify the description (without spoiling it completely) would be.

/cc @FreeCodeCamp/moderators

[Quotidian01]

Thanks for the hint systimotic.
I was able to greatly shorten and simplify my code using your hint.
Boolean objects had apparently gone over my head.

Much appreciated.
;-)

[erictleung]

@systimotic yeah, the challenge description is sparse. One way to guide a camper to a simpler solution is to explain just a little more about falsy values. We could change the description to

Remove all falsy values from an array.

Falsy values in JavaScript are values that are false when evaluated as a Boolean. Some examples of falsy values are false, null, 0, "", undefined, and NaN.

Two thoughts on this change:

1. Is it confusing to say "...evaluated as a Boolean"?
2. Is it too straight forward with these changes? (My answer here is no, because this challenge is in the basic algorithm challenges currently, and still serves as a good learning lessons on falsy values)

[Quotidian01]

I am a bit too new here to pass judgement on whether to change anything with the challenge or not. I learned something by grappling about NaN by researching "reported bugs" for this challenge and my own code tweaking to get my idea to work (however incorrect while still satisfying the challenge).
I will say that the challenge could indicate that all the testing to satisfy this challenge should be done using ONE if statement.
Concise code (utilizing the Boolean object) is the objective versus utilizing the native types of false(y) values.
Thanks again for your responses.

[systimotic]

@Quotidian01 You're never too new to pass judgement on this! In fact, being new is a plus, as you have a better insight to what makes sense to campers doing this challenge.

@erictleung I don't think that is too straight forward either.
"Evaluated as a boolean" may be better as "converted to a boolean."

Should we label this help wanted?

[Quotidian01]

If falsy values are difficult to understand then .isNaN() is even more bizarre:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN
Another hint might be to NOT use isNaN() in this challenge although isNaN() would be something that a person researching this problem might come across (I did).

Systimotic pointed me in the right direction (thanks again) but it was this bit of documentation below that caught my attention since it evaluates in a counter intuitive fashion: how can a false value evaluate to true? This got me thinking that "NaN" might evaluate differently inside a Boolean object.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
Do not confuse the primitive boolean values true and false with the true and false values of the Boolean object. For example:

var b = new Boolean(false);
if (b) // this condition evaluates to true
if (b == true) // this condition evaluates to false

I wouldn't want to take all the "teeth" away from this challenge by making it too easy since it was ultimately research that brought me to the challenges ultimate solution: the Boolean object.

[erictleung]

@Quotidian01 thanks for your thoughts on the matter!

@systimotic I'm good with the changes I've proposed. Additionally, I think it might be nice to add an additional "Helpful Link" for this challenge, which would be the article "Control flow and error handling" that @Quotidian01 referenced. Thoughts?

[systimotic]

@erictleung As @Quotidian01 mentioned, that link can be a bit confusing, and I don't think it adds any new information that's not already in the description or in the other links.

I think talking about the Boolean object explicitly in the description would be a good change 👍

[codeman869]

I think this is a tricky challenge to modify without giving away too much information to the learner. I see a lot of the hints and wording suggestions locking learners into a particular solution - which is I think something that we should tend to avoid.

My method for solving this challenge didn't use Boolean objects or if statements. @systimotic I agree that adding information specifically regarding Boolean objects would be helpful, but I think that there should be something along the lines of addressing the fact that this challenge can be solved multiple ways - perhaps a reminder note of some sorts.

I'd also like to suggest adding a link to the logical operators as well.

[systimotic]

@codeman869 Good points!

I actually used your method as well when initially playing around with possible solutions, before taking a look at the link.

I do agree that maybe this is pointing to a specific solution too much.
If we add your link, we're pointing to two solutions, which could be very confusing. As a camper, I would think that I would have to do something with both links.

The page on logical operators also doesn't really show how to convert a value to a boolean. It does state

!!bCondition is always equal to bCondition,

but I wouldn't be able to tell that it was converted to a boolean if I didn't know already.

[codeman869]

@systimotic Good points as well!

I can see that a camper wouldn't realize that !value would convert to boolean without specific instruction or prior programming experience.

What do you think if the description was modified to say something along these lines:

Remove all falsy values from an array.

Falsy values in JavaScript are false, null, 0, "", undefined, and NaN.
Hint: Try converting each value to Boolean first

Remember to use Read-Search-Ask if you get stuck. Write your own code.

Here are some helpful links:

Or is that too much of a hint?

[systimotic]

@codeman869 I like it! I think "first" could be omitted, but I like the balance between pointing the camper in the right direction, but not telling them specifically which tool they should use. Do you want to create a PR for this?

[vishwas0459]

What is wrong with below code?

`
function isFalse(value)
{
return value ===true ;

}

function bouncer(arr) {

for(var i=0;i {

var x = Boolean(arr[i]);
if(!x)
{
     arr=arr.filter(isFalse,arr[i]);
}

}
return arr;
}
bouncer([7, "ate", "", false, 9]);
`

[vishwas0459]

I got it.
Just changed return return value ===true ; to return !value ==false ;
after reading the earlier comments again and again. Thanks @codeman869`

[gatzkerob]

Just a tip: NaN is never equal to itself, so you can pick it out from the rest pretty easily ;) Create a separate test for finding NaN in the user supplied array before iterating through the falsies.

SPOILER:

function bouncer(arr) {
  var falsies = [false, null, 0, "", undefined, NaN];

  return arr.filter(function(f){
    return f !== f ? false : falsies.indexOf(f) === -1;
  });
}

bouncer([1, null, NaN, 2, undefined]);

// Output: [1, 2]