Need some help understanding how this code works for Falsy Bouncer challenge

Need some help understanding how this code works for Falsy Bouncer challenge
0.0 0

#1

Hi All,

I just recently completed the challenge Falsy Bouncer and passed it, but I’m not sure I quite understand how this code is working to give me the correct answer lol.

function bouncer(arr) {

var falsy = [false, null, 0, "", undefined, NaN];
  
  arr = arr.filter(function(val){
    for ( var i = 0; i < falsy.length; i++ ){
      if ( val !== falsy[i] ) {
        return val;
      }
    }
  });
    
  return arr;
}               
bouncer([7, "ate", "", false, 9]);

Please take a look at my JavaScript Tutor https://goo.gl/csK09D

The for loop goes through and looks at the value falsy(0) which is 7 which then goes down to the if statement which is true because of course 7 does not equal false, and then it returns the value of 7.

Here is where I don’t understand how or why this works. This code I created doesn’t iterate over the whole array of falsy… ever. So how could it possibly know if the val !== equal the values that are within the falsy array?

Did I just somehow create a statement to trick the system to work, or is JavaScript Tutor not showing some aspect?

I’m thinking an indexOf method might be a little better for this, but if someone could please explain I’d really appreciate because I want to make sure I’m understanding this 100%.


#2

Actually you don’t need for and if loops, .filter() method is doing the job for you.

How your code works:

  • Take an item from arr
  • i is 0
  • if val is not falsy (falsy[0] is false), return that value
  • else do nothing
  • Loop

You could remove for and if and it still works:

  arr = arr.filter(function(val){
    return val;
  });

#3

LOL, I see what you did there :wink:
I took the long route like you to finish the challenge, then I realized there was an easier way.
All it took was a bit of understanding of what “falsy” actually meant.

Falsy is a term used in JavaScript to describe how a Boolean is handled. When you consider operations like 1 < 2, or 4 == 3. These expression result in either truthy or falsy statement.

Falsy meaning the resulting expression will fall under one of these values.

[ false, null, 0, "", undefined, NaN ]

Anything that is not in falsy will be a truthy.

So what happened in your code?
The Array function filter is describe by the MDN like this:

“The filter() method creates a new array with all elements that pass the test implemented by the provided function.”

This doesn’t say a whole lot, until we know what this callback function does.
Let’s move onto what the callback function says:

Callback Function
Function is a predicate, to test each element of the array. Return true to keep the element, false otherwise, taking three arguments:

Another words, what filter function wants is a true or false decision. Or Truthy or Falsy Value.
Since all values can be thought as Truthy or Falsy. We can say that the input array contains either Truthy or Falsy values.

For example:

[ 7, "ate", "", false, 9 ]
7 is a Truthy
"ate" is a Truthy
"" is a Falsy
false is a Falsy
9 is a Truthy

Hence, when you say return arr it is basically returning a truthy or falsy value.
7 is Truthy = Keep
"ate" is Truthy = Keep
"" is a Falsy = Discard
false is a Falsy = Discard
9 is a Truthy = Keep


#4

Thanks again for the explanation! I guess I’m just always over thinking things when it comes to coding :frowning:

Hopefully I’ll figure it out at some point!