Array and Boolean

By  on  

One of the annoyances of old-school JavaScript was side effects; then Array.prototype got methods like filter, map, and forEach so we didn't need to burn variables before looping over values.  I can't explain how happy I am that the JavaScript language continues to evolve.

Every once in a while I need to filter an array by not its original value but instead a new value, so I use map:

myArray.map(item => {
    // Do whatever processing...

    // If we don't care about the item, return false or null or undefined
    return false;
});

While I get the new values I want, sometimes if an iteration returns a result I don't want, I return null or false, which is great, but then I'm left with a bunch of useless items in the resulting array.  The next step is using filter, in which case I could do:

myArray
    .map(item => {
        // ...
    })
    // Get rid of bad values
    .filter(item => item);

Since the values I don't want aren't truthy, the filter above removes those bad items.  Did you know there's a clearer way with Boolean?

myArray
    .map(item => {
        // ...
    })
    // Get rid of bad values
    .filter(Boolean);

If the value isn't truthy the item is filtered out and I'm left with only the items I want!

Recent Features

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

Incredible Demos

  • By
    Disable Autocomplete, Autocapitalize, and Autocorrect

    Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features.  Unfortunately these features can sometimes get in the way;  we don't always want or need the help they provide.  Luckily most browsers allow...

  • By
    Xbox Live Gamer API

    My sharpshooter status aside, I've always been surprised upset that Microsoft has never provided an API for the vast amount of information about users, the games they play, and statistics within the games. Namely, I'd like to publicly shame every n00b I've baptized with my...

Discussion

  1. Alec

    This is definitely good to know. I don’t think the people I work with are familiar enough with Boolean as a function. If you’ve never used it before, at first glance it might look like it returns values where typeof item === 'boolean', thus true or false would pass. I think clearest enough is just a reusable fn name like "isTruthy". I like how you do the map, then filter. I find myself doing that a lot. Especially where you might map to a new value, but that value might not always exist. I’ve seen this done using reduce or loops, and I think this approach makes the logic incredibly clear.

  2. bryanyang

    Wow, I use the fliter many times. but also don’t know the Boolen can kick out the bad item.

  3. MaxArt

    > Every once in a while I need to filter an array by not its original value but instead a new value, so I use map

    I feel a more specific example is needed, otherwise I’d say you’re usually good with just filter. Maybe you mean you actually mean that you need to map the values anyway, but I’d say you should filter first, and then map, so you can limit the array size beforehand.

    Also it’s nice to know that the upcoming stage 3 proposal flatMap (available on Chrome 69 and Firefox 62, that got just released!) can be used to do a map and a filter in one go! Just return an empty array for those elements you want to be left out.

  4. Zac

    I would definitely recommend just using a reduce for this with a list as your accumulator. That way you only have to loop over the array once.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!