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

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP












33














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




























    33














    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


























      33












      33








      33


      3





      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















      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















      share|improve this question













      share|improve this question




      share|improve this question








      edited Dec 25 '18 at 12:19









      Boann

      36.7k1287121




      36.7k1287121










      asked Dec 25 '18 at 6:52









      imckl

      17115




      17115






















          6 Answers
          6






          active

          oldest

          votes


















          32














          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)) 

          // Number(0) -> 0
          // Number(Number(0)) -> 0
          // Number('') -> 0
          // Number('test') -> NaN
          // When filter function picks *truthy* values, all the above are ignored
          // So, it returns [-1, 1, 2, 3, 4]





          share|improve this answer


















          • 2




            Notice that new Boolean(false) is truthy, as well as an empty object () and an empty array ().
            – Ismael Miguel
            Dec 25 '18 at 23:39


















          11














          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




























            5














            Expected behavior



            This behavior isn't unique to using Number as the filter function. A filter function that simple returns the 0 value would also remove it from the list.






            var a = [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(v => v)
            console.log(a); // [-1, 1, 2, 3, 4, "test"]





            This is because Number isn't specifically a filter function, it's primarily a type-casting function (and a class constructor, but not a very useful one). So when a number (like 0) is passed to Number, it just returns that number.



            Array.prototype.filter removes values that are falsy. In JavaScript, the following are falsy and thus removed by filter.



            false
            null
            undefined
            0
            NaN
            ''
            ""
            ``


            (For complicated backwards compatibility reasons MDN goes into, document.all is also falsy in many browsers despite being an object, but that's a side-note)






            share|improve this answer






















            • Use Number.isFinite instead of Number will be more semantic in code.
              – imckl
              Dec 26 '18 at 5:18


















            4














            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




























              3














              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




























                3














                It's because 0 is a falsy value which returns false, and anything that returns false to the filter function is filtered out of the new array.



                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
                  );



                  );













                  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

























                  6 Answers
                  6






                  active

                  oldest

                  votes








                  6 Answers
                  6






                  active

                  oldest

                  votes









                  active

                  oldest

                  votes






                  active

                  oldest

                  votes









                  32














                  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)) 

                  // Number(0) -> 0
                  // Number(Number(0)) -> 0
                  // Number('') -> 0
                  // Number('test') -> NaN
                  // When filter function picks *truthy* values, all the above are ignored
                  // So, it returns [-1, 1, 2, 3, 4]





                  share|improve this answer


















                  • 2




                    Notice that new Boolean(false) is truthy, as well as an empty object () and an empty array ().
                    – Ismael Miguel
                    Dec 25 '18 at 23:39















                  32














                  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)) 

                  // Number(0) -> 0
                  // Number(Number(0)) -> 0
                  // Number('') -> 0
                  // Number('test') -> NaN
                  // When filter function picks *truthy* values, all the above are ignored
                  // So, it returns [-1, 1, 2, 3, 4]





                  share|improve this answer


















                  • 2




                    Notice that new Boolean(false) is truthy, as well as an empty object () and an empty array ().
                    – Ismael Miguel
                    Dec 25 '18 at 23:39













                  32












                  32








                  32






                  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)) 

                  // Number(0) -> 0
                  // Number(Number(0)) -> 0
                  // Number('') -> 0
                  // Number('test') -> NaN
                  // When filter function picks *truthy* values, all the above are ignored
                  // So, it returns [-1, 1, 2, 3, 4]





                  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)) 

                  // Number(0) -> 0
                  // Number(Number(0)) -> 0
                  // Number('') -> 0
                  // Number('test') -> NaN
                  // When filter function picks *truthy* values, all the above are ignored
                  // So, it returns [-1, 1, 2, 3, 4]






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Dec 27 '18 at 10:05

























                  answered Dec 25 '18 at 6:58









                  adiga

                  6,06662141




                  6,06662141







                  • 2




                    Notice that new Boolean(false) is truthy, as well as an empty object () and an empty array ().
                    – Ismael Miguel
                    Dec 25 '18 at 23:39












                  • 2




                    Notice that new Boolean(false) is truthy, as well as an empty object () and an empty array ().
                    – Ismael Miguel
                    Dec 25 '18 at 23:39







                  2




                  2




                  Notice that new Boolean(false) is truthy, as well as an empty object () and an empty array ().
                  – Ismael Miguel
                  Dec 25 '18 at 23:39




                  Notice that new Boolean(false) is truthy, as well as an empty object () and an empty array ().
                  – Ismael Miguel
                  Dec 25 '18 at 23:39













                  11














                  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

























                    11














                    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























                      11












                      11








                      11






                      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 Dec 25 '18 at 9:21









                      Nina Scholz

                      177k1390155




                      177k1390155





















                          5














                          Expected behavior



                          This behavior isn't unique to using Number as the filter function. A filter function that simple returns the 0 value would also remove it from the list.






                          var a = [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(v => v)
                          console.log(a); // [-1, 1, 2, 3, 4, "test"]





                          This is because Number isn't specifically a filter function, it's primarily a type-casting function (and a class constructor, but not a very useful one). So when a number (like 0) is passed to Number, it just returns that number.



                          Array.prototype.filter removes values that are falsy. In JavaScript, the following are falsy and thus removed by filter.



                          false
                          null
                          undefined
                          0
                          NaN
                          ''
                          ""
                          ``


                          (For complicated backwards compatibility reasons MDN goes into, document.all is also falsy in many browsers despite being an object, but that's a side-note)






                          share|improve this answer






















                          • Use Number.isFinite instead of Number will be more semantic in code.
                            – imckl
                            Dec 26 '18 at 5:18















                          5














                          Expected behavior



                          This behavior isn't unique to using Number as the filter function. A filter function that simple returns the 0 value would also remove it from the list.






                          var a = [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(v => v)
                          console.log(a); // [-1, 1, 2, 3, 4, "test"]





                          This is because Number isn't specifically a filter function, it's primarily a type-casting function (and a class constructor, but not a very useful one). So when a number (like 0) is passed to Number, it just returns that number.



                          Array.prototype.filter removes values that are falsy. In JavaScript, the following are falsy and thus removed by filter.



                          false
                          null
                          undefined
                          0
                          NaN
                          ''
                          ""
                          ``


                          (For complicated backwards compatibility reasons MDN goes into, document.all is also falsy in many browsers despite being an object, but that's a side-note)






                          share|improve this answer






















                          • Use Number.isFinite instead of Number will be more semantic in code.
                            – imckl
                            Dec 26 '18 at 5:18













                          5












                          5








                          5






                          Expected behavior



                          This behavior isn't unique to using Number as the filter function. A filter function that simple returns the 0 value would also remove it from the list.






                          var a = [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(v => v)
                          console.log(a); // [-1, 1, 2, 3, 4, "test"]





                          This is because Number isn't specifically a filter function, it's primarily a type-casting function (and a class constructor, but not a very useful one). So when a number (like 0) is passed to Number, it just returns that number.



                          Array.prototype.filter removes values that are falsy. In JavaScript, the following are falsy and thus removed by filter.



                          false
                          null
                          undefined
                          0
                          NaN
                          ''
                          ""
                          ``


                          (For complicated backwards compatibility reasons MDN goes into, document.all is also falsy in many browsers despite being an object, but that's a side-note)






                          share|improve this answer














                          Expected behavior



                          This behavior isn't unique to using Number as the filter function. A filter function that simple returns the 0 value would also remove it from the list.






                          var a = [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(v => v)
                          console.log(a); // [-1, 1, 2, 3, 4, "test"]





                          This is because Number isn't specifically a filter function, it's primarily a type-casting function (and a class constructor, but not a very useful one). So when a number (like 0) is passed to Number, it just returns that number.



                          Array.prototype.filter removes values that are falsy. In JavaScript, the following are falsy and thus removed by filter.



                          false
                          null
                          undefined
                          0
                          NaN
                          ''
                          ""
                          ``


                          (For complicated backwards compatibility reasons MDN goes into, document.all is also falsy in many browsers despite being an object, but that's a side-note)






                          var a = [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(v => v)
                          console.log(a); // [-1, 1, 2, 3, 4, "test"]





                          var a = [-1, 0, 1, 2, 3, 4, Number(0), '', 'test'].filter(v => v)
                          console.log(a); // [-1, 1, 2, 3, 4, "test"]






                          share|improve this answer














                          share|improve this answer



                          share|improve this answer








                          edited Dec 25 '18 at 16:09

























                          answered Dec 25 '18 at 15:52









                          Alexander O'Mara

                          43.3k1398129




                          43.3k1398129











                          • Use Number.isFinite instead of Number will be more semantic in code.
                            – imckl
                            Dec 26 '18 at 5:18
















                          • Use Number.isFinite instead of Number will be more semantic in code.
                            – imckl
                            Dec 26 '18 at 5:18















                          Use Number.isFinite instead of Number will be more semantic in code.
                          – imckl
                          Dec 26 '18 at 5:18




                          Use Number.isFinite instead of Number will be more semantic in code.
                          – imckl
                          Dec 26 '18 at 5:18











                          4














                          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

























                            4














                            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























                              4












                              4








                              4






                              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 Dec 25 '18 at 6:59









                              bronkula

                              37618




                              37618





















                                  3














                                  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

























                                    3














                                    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























                                      3












                                      3








                                      3






                                      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 Dec 25 '18 at 7:02









                                      Abhay Sehgal

                                      30728




                                      30728





















                                          3














                                          It's because 0 is a falsy value which returns false, and anything that returns false to the filter function is filtered out of the new array.



                                          Documentation



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






                                          share|improve this answer



























                                            3














                                            It's because 0 is a falsy value which returns false, and anything that returns false to the filter function is filtered out of the new array.



                                            Documentation



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






                                            share|improve this answer

























                                              3












                                              3








                                              3






                                              It's because 0 is a falsy value which returns false, and anything that returns false to the filter function is filtered out of the new array.



                                              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, and anything that returns false to the filter function is filtered out of the new array.



                                              Documentation



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







                                              share|improve this answer














                                              share|improve this answer



                                              share|improve this answer








                                              edited Dec 28 '18 at 19:23

























                                              answered Dec 25 '18 at 7:01









                                              AnonymousSB

                                              2,184221




                                              2,184221



























                                                  draft saved

                                                  draft discarded
















































                                                  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

                                                  How to check contact read email or not when send email to Individual?

                                                  Displaying single band from multi-band raster using QGIS

                                                  How many registers does an x86_64 CPU actually have?