Why does Array.filter(Number) filter zero out in JavaScript?












12














I'm trying to filter all non-numeric elements out from an array. We can see the desired output when using typeof. But with Number, it filters zero out.



Here's the example (tested in Chrome Console):



[-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number)
// Which output with zero filtered out:
[-1, 1, 2, 3, 4] // 0 is filtered


If we use typeof, it doesn't filter zero, which was expected.



// code
[-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(n => typeof n === 'number')
// output
[-1, 0, 1, 2, 3, 4, 0]


My question:




  1. What is the difference between the 'Number' and 'typeof' approaches?


  2. Number filters zero, but 'Number' itself literally contains zero, and this confuses me.











share|improve this question









New contributor




imckl is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

























    12














    I'm trying to filter all non-numeric elements out from an array. We can see the desired output when using typeof. But with Number, it filters zero out.



    Here's the example (tested in Chrome Console):



    [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number)
    // Which output with zero filtered out:
    [-1, 1, 2, 3, 4] // 0 is filtered


    If we use typeof, it doesn't filter zero, which was expected.



    // code
    [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(n => typeof n === 'number')
    // output
    [-1, 0, 1, 2, 3, 4, 0]


    My question:




    1. What is the difference between the 'Number' and 'typeof' approaches?


    2. Number filters zero, but 'Number' itself literally contains zero, and this confuses me.











    share|improve this question









    New contributor




    imckl is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.























      12












      12








      12


      2





      I'm trying to filter all non-numeric elements out from an array. We can see the desired output when using typeof. But with Number, it filters zero out.



      Here's the example (tested in Chrome Console):



      [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number)
      // Which output with zero filtered out:
      [-1, 1, 2, 3, 4] // 0 is filtered


      If we use typeof, it doesn't filter zero, which was expected.



      // code
      [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(n => typeof n === 'number')
      // output
      [-1, 0, 1, 2, 3, 4, 0]


      My question:




      1. What is the difference between the 'Number' and 'typeof' approaches?


      2. Number filters zero, but 'Number' itself literally contains zero, and this confuses me.











      share|improve this question









      New contributor




      imckl is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      I'm trying to filter all non-numeric elements out from an array. We can see the desired output when using typeof. But with Number, it filters zero out.



      Here's the example (tested in Chrome Console):



      [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number)
      // Which output with zero filtered out:
      [-1, 1, 2, 3, 4] // 0 is filtered


      If we use typeof, it doesn't filter zero, which was expected.



      // code
      [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(n => typeof n === 'number')
      // output
      [-1, 0, 1, 2, 3, 4, 0]


      My question:




      1. What is the difference between the 'Number' and 'typeof' approaches?


      2. Number filters zero, but 'Number' itself literally contains zero, and this confuses me.








      javascript numbers typeof






      share|improve this question









      New contributor




      imckl is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question









      New contributor




      imckl is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question








      edited 27 mins ago









      Boann

      36.7k1287121




      36.7k1287121






      New contributor




      imckl is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 5 hours ago









      imckl

      634




      634




      New contributor




      imckl is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      imckl is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      imckl is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.
























          5 Answers
          5






          active

          oldest

          votes


















          11














          Because 0 is one of the many falsy values in javascript



          All these conditions will be sent to else blocks:



          if (false)
          if (null)
          if (undefined)
          if (0)
          if (NaN)
          if ('')
          if ("")
          if (``)


          From the Array.prototype.filter() documentation:




          filter() calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback returns a value that coerces to true




          In your case the callback function is the Number. So your code is equivalent to:



          [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(a => Number(a))





          share|improve this answer































            2














            Zero is a falsey value. The typeof is always returning a boolean value. When the number 0 is returned, it is returning to the test, and therefore coming back as false, so the number zero is filtered out.






            share|improve this answer





























              2














              To prevent a falsy zero from filtering, you could use another callback for getting only numerical values: Number.isFinite






              console.log([-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number.isFinite))








              share|improve this answer





























                1














                When you're using Number in filter, Actually it is passing each item of Array to Number constructor and in case of string or 0 Number will return NaN or 0 and both of them are false so filter is filtering out both of them



                whereas when you're using typeof then 0 has "number" type so it is returning true and filter method doesn't filtering it out






                share|improve this answer





























                  1














                  It's because 0 is a falsy value which returns false



                  Documentation



                  https://developer.mozilla.org/en-US/docs/Glossary/Falsy






                  share|improve this answer























                    Your Answer






                    StackExchange.ifUsing("editor", function () {
                    StackExchange.using("externalEditor", function () {
                    StackExchange.using("snippets", function () {
                    StackExchange.snippets.init();
                    });
                    });
                    }, "code-snippets");

                    StackExchange.ready(function() {
                    var channelOptions = {
                    tags: "".split(" "),
                    id: "1"
                    };
                    initTagRenderer("".split(" "), "".split(" "), channelOptions);

                    StackExchange.using("externalEditor", function() {
                    // Have to fire editor after snippets, if snippets enabled
                    if (StackExchange.settings.snippets.snippetsEnabled) {
                    StackExchange.using("snippets", function() {
                    createEditor();
                    });
                    }
                    else {
                    createEditor();
                    }
                    });

                    function createEditor() {
                    StackExchange.prepareEditor({
                    heartbeatType: 'answer',
                    autoActivateHeartbeat: false,
                    convertImagesToLinks: true,
                    noModals: true,
                    showLowRepImageUploadWarning: true,
                    reputationToPostImages: 10,
                    bindNavPrevention: true,
                    postfix: "",
                    imageUploader: {
                    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                    allowUrls: true
                    },
                    onDemand: true,
                    discardSelector: ".discard-answer"
                    ,immediatelyShowMarkdownHelp:true
                    });


                    }
                    });






                    imckl is a new contributor. Be nice, and check out our Code of Conduct.










                    draft saved

                    draft discarded


















                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53920037%2fwhy-does-array-filternumber-filter-zero-out-in-javascript%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown

























                    5 Answers
                    5






                    active

                    oldest

                    votes








                    5 Answers
                    5






                    active

                    oldest

                    votes









                    active

                    oldest

                    votes






                    active

                    oldest

                    votes









                    11














                    Because 0 is one of the many falsy values in javascript



                    All these conditions will be sent to else blocks:



                    if (false)
                    if (null)
                    if (undefined)
                    if (0)
                    if (NaN)
                    if ('')
                    if ("")
                    if (``)


                    From the Array.prototype.filter() documentation:




                    filter() calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback returns a value that coerces to true




                    In your case the callback function is the Number. So your code is equivalent to:



                    [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(a => Number(a))





                    share|improve this answer




























                      11














                      Because 0 is one of the many falsy values in javascript



                      All these conditions will be sent to else blocks:



                      if (false)
                      if (null)
                      if (undefined)
                      if (0)
                      if (NaN)
                      if ('')
                      if ("")
                      if (``)


                      From the Array.prototype.filter() documentation:




                      filter() calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback returns a value that coerces to true




                      In your case the callback function is the Number. So your code is equivalent to:



                      [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(a => Number(a))





                      share|improve this answer


























                        11












                        11








                        11






                        Because 0 is one of the many falsy values in javascript



                        All these conditions will be sent to else blocks:



                        if (false)
                        if (null)
                        if (undefined)
                        if (0)
                        if (NaN)
                        if ('')
                        if ("")
                        if (``)


                        From the Array.prototype.filter() documentation:




                        filter() calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback returns a value that coerces to true




                        In your case the callback function is the Number. So your code is equivalent to:



                        [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(a => Number(a))





                        share|improve this answer














                        Because 0 is one of the many falsy values in javascript



                        All these conditions will be sent to else blocks:



                        if (false)
                        if (null)
                        if (undefined)
                        if (0)
                        if (NaN)
                        if ('')
                        if ("")
                        if (``)


                        From the Array.prototype.filter() documentation:




                        filter() calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback returns a value that coerces to true




                        In your case the callback function is the Number. So your code is equivalent to:



                        [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(a => Number(a))






                        share|improve this answer














                        share|improve this answer



                        share|improve this answer








                        edited 5 hours ago

























                        answered 5 hours ago









                        adiga

                        5,69662039




                        5,69662039

























                            2














                            Zero is a falsey value. The typeof is always returning a boolean value. When the number 0 is returned, it is returning to the test, and therefore coming back as false, so the number zero is filtered out.






                            share|improve this answer


























                              2














                              Zero is a falsey value. The typeof is always returning a boolean value. When the number 0 is returned, it is returning to the test, and therefore coming back as false, so the number zero is filtered out.






                              share|improve this answer
























                                2












                                2








                                2






                                Zero is a falsey value. The typeof is always returning a boolean value. When the number 0 is returned, it is returning to the test, and therefore coming back as false, so the number zero is filtered out.






                                share|improve this answer












                                Zero is a falsey value. The typeof is always returning a boolean value. When the number 0 is returned, it is returning to the test, and therefore coming back as false, so the number zero is filtered out.







                                share|improve this answer












                                share|improve this answer



                                share|improve this answer










                                answered 5 hours ago









                                bronkula

                                387




                                387























                                    2














                                    To prevent a falsy zero from filtering, you could use another callback for getting only numerical values: Number.isFinite






                                    console.log([-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number.isFinite))








                                    share|improve this answer


























                                      2














                                      To prevent a falsy zero from filtering, you could use another callback for getting only numerical values: Number.isFinite






                                      console.log([-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number.isFinite))








                                      share|improve this answer
























                                        2












                                        2








                                        2






                                        To prevent a falsy zero from filtering, you could use another callback for getting only numerical values: Number.isFinite






                                        console.log([-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number.isFinite))








                                        share|improve this answer












                                        To prevent a falsy zero from filtering, you could use another callback for getting only numerical values: Number.isFinite






                                        console.log([-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number.isFinite))








                                        console.log([-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number.isFinite))





                                        console.log([-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(Number.isFinite))






                                        share|improve this answer












                                        share|improve this answer



                                        share|improve this answer










                                        answered 3 hours ago









                                        Nina Scholz

                                        174k1388152




                                        174k1388152























                                            1














                                            When you're using Number in filter, Actually it is passing each item of Array to Number constructor and in case of string or 0 Number will return NaN or 0 and both of them are false so filter is filtering out both of them



                                            whereas when you're using typeof then 0 has "number" type so it is returning true and filter method doesn't filtering it out






                                            share|improve this answer


























                                              1














                                              When you're using Number in filter, Actually it is passing each item of Array to Number constructor and in case of string or 0 Number will return NaN or 0 and both of them are false so filter is filtering out both of them



                                              whereas when you're using typeof then 0 has "number" type so it is returning true and filter method doesn't filtering it out






                                              share|improve this answer
























                                                1












                                                1








                                                1






                                                When you're using Number in filter, Actually it is passing each item of Array to Number constructor and in case of string or 0 Number will return NaN or 0 and both of them are false so filter is filtering out both of them



                                                whereas when you're using typeof then 0 has "number" type so it is returning true and filter method doesn't filtering it out






                                                share|improve this answer












                                                When you're using Number in filter, Actually it is passing each item of Array to Number constructor and in case of string or 0 Number will return NaN or 0 and both of them are false so filter is filtering out both of them



                                                whereas when you're using typeof then 0 has "number" type so it is returning true and filter method doesn't filtering it out







                                                share|improve this answer












                                                share|improve this answer



                                                share|improve this answer










                                                answered 5 hours ago









                                                Abhay Sehgal

                                                16318




                                                16318























                                                    1














                                                    It's because 0 is a falsy value which returns false



                                                    Documentation



                                                    https://developer.mozilla.org/en-US/docs/Glossary/Falsy






                                                    share|improve this answer




























                                                      1














                                                      It's because 0 is a falsy value which returns false



                                                      Documentation



                                                      https://developer.mozilla.org/en-US/docs/Glossary/Falsy






                                                      share|improve this answer


























                                                        1












                                                        1








                                                        1






                                                        It's because 0 is a falsy value which returns false



                                                        Documentation



                                                        https://developer.mozilla.org/en-US/docs/Glossary/Falsy






                                                        share|improve this answer














                                                        It's because 0 is a falsy value which returns false



                                                        Documentation



                                                        https://developer.mozilla.org/en-US/docs/Glossary/Falsy







                                                        share|improve this answer














                                                        share|improve this answer



                                                        share|improve this answer








                                                        edited 5 hours ago

























                                                        answered 5 hours ago









                                                        AnonymousSB

                                                        2,149220




                                                        2,149220






















                                                            imckl is a new contributor. Be nice, and check out our Code of Conduct.










                                                            draft saved

                                                            draft discarded


















                                                            imckl is a new contributor. Be nice, and check out our Code of Conduct.













                                                            imckl is a new contributor. Be nice, and check out our Code of Conduct.












                                                            imckl is a new contributor. Be nice, and check out our Code of Conduct.
















                                                            Thanks for contributing an answer to Stack Overflow!


                                                            • Please be sure to answer the question. Provide details and share your research!

                                                            But avoid



                                                            • Asking for help, clarification, or responding to other answers.

                                                            • Making statements based on opinion; back them up with references or personal experience.


                                                            To learn more, see our tips on writing great answers.





                                                            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                                                            Please pay close attention to the following guidance:


                                                            • Please be sure to answer the question. Provide details and share your research!

                                                            But avoid



                                                            • Asking for help, clarification, or responding to other answers.

                                                            • Making statements based on opinion; back them up with references or personal experience.


                                                            To learn more, see our tips on writing great answers.




                                                            draft saved


                                                            draft discarded














                                                            StackExchange.ready(
                                                            function () {
                                                            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53920037%2fwhy-does-array-filternumber-filter-zero-out-in-javascript%23new-answer', 'question_page');
                                                            }
                                                            );

                                                            Post as a guest















                                                            Required, but never shown





















































                                                            Required, but never shown














                                                            Required, but never shown












                                                            Required, but never shown







                                                            Required, but never shown

































                                                            Required, but never shown














                                                            Required, but never shown












                                                            Required, but never shown







                                                            Required, but never shown







                                                            Popular posts from this blog

                                                            404 Error Contact Form 7 ajax form submitting

                                                            How to know if a Active Directory user can login interactively

                                                            TypeError: fit_transform() missing 1 required positional argument: 'X'