Why does JavaScript not convert array-like objects to arrays?










1














While learning about DOM manipulation I noticed that Document methods such as getElementByTagName or querySelectorAll return HTMLCollection or NodeList objects which, however much they look like arrays, have to be converted to arrays using Arrays.from() if we want these collections to have the very useful array methods. I am wondering why this is so. Is there any particular reason why JS does not automatically convert these collections to arrays?



Edit: It has been brought to my attention that NodeList has forEach() in all major browsers.










share|improve this question



















  • 1




    Short answer is it is because they are DOM objects that are "array like". Why they aren't automatically JS arrays is purely opinion based. Why should they be?
    – charlietfl
    Nov 11 at 12:53
















1














While learning about DOM manipulation I noticed that Document methods such as getElementByTagName or querySelectorAll return HTMLCollection or NodeList objects which, however much they look like arrays, have to be converted to arrays using Arrays.from() if we want these collections to have the very useful array methods. I am wondering why this is so. Is there any particular reason why JS does not automatically convert these collections to arrays?



Edit: It has been brought to my attention that NodeList has forEach() in all major browsers.










share|improve this question



















  • 1




    Short answer is it is because they are DOM objects that are "array like". Why they aren't automatically JS arrays is purely opinion based. Why should they be?
    – charlietfl
    Nov 11 at 12:53














1












1








1







While learning about DOM manipulation I noticed that Document methods such as getElementByTagName or querySelectorAll return HTMLCollection or NodeList objects which, however much they look like arrays, have to be converted to arrays using Arrays.from() if we want these collections to have the very useful array methods. I am wondering why this is so. Is there any particular reason why JS does not automatically convert these collections to arrays?



Edit: It has been brought to my attention that NodeList has forEach() in all major browsers.










share|improve this question















While learning about DOM manipulation I noticed that Document methods such as getElementByTagName or querySelectorAll return HTMLCollection or NodeList objects which, however much they look like arrays, have to be converted to arrays using Arrays.from() if we want these collections to have the very useful array methods. I am wondering why this is so. Is there any particular reason why JS does not automatically convert these collections to arrays?



Edit: It has been brought to my attention that NodeList has forEach() in all major browsers.







javascript arrays type-conversion nodelist htmlcollection






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 12 at 11:05

























asked Nov 11 at 12:50









jeporcher

13512




13512







  • 1




    Short answer is it is because they are DOM objects that are "array like". Why they aren't automatically JS arrays is purely opinion based. Why should they be?
    – charlietfl
    Nov 11 at 12:53













  • 1




    Short answer is it is because they are DOM objects that are "array like". Why they aren't automatically JS arrays is purely opinion based. Why should they be?
    – charlietfl
    Nov 11 at 12:53








1




1




Short answer is it is because they are DOM objects that are "array like". Why they aren't automatically JS arrays is purely opinion based. Why should they be?
– charlietfl
Nov 11 at 12:53





Short answer is it is because they are DOM objects that are "array like". Why they aren't automatically JS arrays is purely opinion based. Why should they be?
– charlietfl
Nov 11 at 12:53













2 Answers
2






active

oldest

votes


















1














The DOM collections have their own types, instead of being Array (or at least array subclass) instances, because they are very different from arrays. They are mere views on the DOM, they are not containers storing the elements themselves. They are immutable (i.e. you cannot .push() on them) or even live views (i.e. they always represent the selection in the current state of the document). Also they can only hold DOM nodes, you cannot put arbitrary values inside them like you can insert into arrays.



Sure, they are array-like in that they have indexed properties and a .length, but that's where the similarity ends. Notice that it is only JavaScript that allows you to access the contents with index properties, according to the pure language-agnostic DOM you would use the .item(index) method. All this is why DOM collections got their own hierarchy and have nothing to do with the Array type that is built into JavaScript.






share|improve this answer




























    -3














    You want the array-like DOM objects to be implicitly convertible to arrays. Javascript is a very dynamic language and performs many such conversions automatically. And it's one of the reasons this language is so hated in the community. For example: 1 == "1" returns true in Javascript.



    So the problem you posed is the age old problem of determining where should we draw the line.



    As you yourself pointed out, all you need to do is make a call to Arrays.from to get an actual array.






    share|improve this answer






















    • Why the downvote though. A comment explaining the error would be appreciated.
      – saga
      Nov 11 at 13:11






    • 1




      Might also note that modern browsers do allow using methods like forEach() on NodeList objects without needing array conversion. Just not supported in all browsers, notably IE
      – charlietfl
      Nov 11 at 13:33











    • Hated in the community? What is the community? It's not hated in any community I'm part of.
      – JJJ
      Nov 11 at 22:10










    • @charlietfl Did not know NodeList objects allowed forEach(). Thanks!
      – jeporcher
      Nov 11 at 22:18










    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%2f53248922%2fwhy-does-javascript-not-convert-array-like-objects-to-arrays%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    The DOM collections have their own types, instead of being Array (or at least array subclass) instances, because they are very different from arrays. They are mere views on the DOM, they are not containers storing the elements themselves. They are immutable (i.e. you cannot .push() on them) or even live views (i.e. they always represent the selection in the current state of the document). Also they can only hold DOM nodes, you cannot put arbitrary values inside them like you can insert into arrays.



    Sure, they are array-like in that they have indexed properties and a .length, but that's where the similarity ends. Notice that it is only JavaScript that allows you to access the contents with index properties, according to the pure language-agnostic DOM you would use the .item(index) method. All this is why DOM collections got their own hierarchy and have nothing to do with the Array type that is built into JavaScript.






    share|improve this answer

























      1














      The DOM collections have their own types, instead of being Array (or at least array subclass) instances, because they are very different from arrays. They are mere views on the DOM, they are not containers storing the elements themselves. They are immutable (i.e. you cannot .push() on them) or even live views (i.e. they always represent the selection in the current state of the document). Also they can only hold DOM nodes, you cannot put arbitrary values inside them like you can insert into arrays.



      Sure, they are array-like in that they have indexed properties and a .length, but that's where the similarity ends. Notice that it is only JavaScript that allows you to access the contents with index properties, according to the pure language-agnostic DOM you would use the .item(index) method. All this is why DOM collections got their own hierarchy and have nothing to do with the Array type that is built into JavaScript.






      share|improve this answer























        1












        1








        1






        The DOM collections have their own types, instead of being Array (or at least array subclass) instances, because they are very different from arrays. They are mere views on the DOM, they are not containers storing the elements themselves. They are immutable (i.e. you cannot .push() on them) or even live views (i.e. they always represent the selection in the current state of the document). Also they can only hold DOM nodes, you cannot put arbitrary values inside them like you can insert into arrays.



        Sure, they are array-like in that they have indexed properties and a .length, but that's where the similarity ends. Notice that it is only JavaScript that allows you to access the contents with index properties, according to the pure language-agnostic DOM you would use the .item(index) method. All this is why DOM collections got their own hierarchy and have nothing to do with the Array type that is built into JavaScript.






        share|improve this answer












        The DOM collections have their own types, instead of being Array (or at least array subclass) instances, because they are very different from arrays. They are mere views on the DOM, they are not containers storing the elements themselves. They are immutable (i.e. you cannot .push() on them) or even live views (i.e. they always represent the selection in the current state of the document). Also they can only hold DOM nodes, you cannot put arbitrary values inside them like you can insert into arrays.



        Sure, they are array-like in that they have indexed properties and a .length, but that's where the similarity ends. Notice that it is only JavaScript that allows you to access the contents with index properties, according to the pure language-agnostic DOM you would use the .item(index) method. All this is why DOM collections got their own hierarchy and have nothing to do with the Array type that is built into JavaScript.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 11 at 14:23









        Bergi

        362k57540864




        362k57540864























            -3














            You want the array-like DOM objects to be implicitly convertible to arrays. Javascript is a very dynamic language and performs many such conversions automatically. And it's one of the reasons this language is so hated in the community. For example: 1 == "1" returns true in Javascript.



            So the problem you posed is the age old problem of determining where should we draw the line.



            As you yourself pointed out, all you need to do is make a call to Arrays.from to get an actual array.






            share|improve this answer






















            • Why the downvote though. A comment explaining the error would be appreciated.
              – saga
              Nov 11 at 13:11






            • 1




              Might also note that modern browsers do allow using methods like forEach() on NodeList objects without needing array conversion. Just not supported in all browsers, notably IE
              – charlietfl
              Nov 11 at 13:33











            • Hated in the community? What is the community? It's not hated in any community I'm part of.
              – JJJ
              Nov 11 at 22:10










            • @charlietfl Did not know NodeList objects allowed forEach(). Thanks!
              – jeporcher
              Nov 11 at 22:18















            -3














            You want the array-like DOM objects to be implicitly convertible to arrays. Javascript is a very dynamic language and performs many such conversions automatically. And it's one of the reasons this language is so hated in the community. For example: 1 == "1" returns true in Javascript.



            So the problem you posed is the age old problem of determining where should we draw the line.



            As you yourself pointed out, all you need to do is make a call to Arrays.from to get an actual array.






            share|improve this answer






















            • Why the downvote though. A comment explaining the error would be appreciated.
              – saga
              Nov 11 at 13:11






            • 1




              Might also note that modern browsers do allow using methods like forEach() on NodeList objects without needing array conversion. Just not supported in all browsers, notably IE
              – charlietfl
              Nov 11 at 13:33











            • Hated in the community? What is the community? It's not hated in any community I'm part of.
              – JJJ
              Nov 11 at 22:10










            • @charlietfl Did not know NodeList objects allowed forEach(). Thanks!
              – jeporcher
              Nov 11 at 22:18













            -3












            -3








            -3






            You want the array-like DOM objects to be implicitly convertible to arrays. Javascript is a very dynamic language and performs many such conversions automatically. And it's one of the reasons this language is so hated in the community. For example: 1 == "1" returns true in Javascript.



            So the problem you posed is the age old problem of determining where should we draw the line.



            As you yourself pointed out, all you need to do is make a call to Arrays.from to get an actual array.






            share|improve this answer














            You want the array-like DOM objects to be implicitly convertible to arrays. Javascript is a very dynamic language and performs many such conversions automatically. And it's one of the reasons this language is so hated in the community. For example: 1 == "1" returns true in Javascript.



            So the problem you posed is the age old problem of determining where should we draw the line.



            As you yourself pointed out, all you need to do is make a call to Arrays.from to get an actual array.







            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Nov 11 at 22:09









            JJJ

            29k147591




            29k147591










            answered Nov 11 at 13:06









            saga

            486315




            486315











            • Why the downvote though. A comment explaining the error would be appreciated.
              – saga
              Nov 11 at 13:11






            • 1




              Might also note that modern browsers do allow using methods like forEach() on NodeList objects without needing array conversion. Just not supported in all browsers, notably IE
              – charlietfl
              Nov 11 at 13:33











            • Hated in the community? What is the community? It's not hated in any community I'm part of.
              – JJJ
              Nov 11 at 22:10










            • @charlietfl Did not know NodeList objects allowed forEach(). Thanks!
              – jeporcher
              Nov 11 at 22:18
















            • Why the downvote though. A comment explaining the error would be appreciated.
              – saga
              Nov 11 at 13:11






            • 1




              Might also note that modern browsers do allow using methods like forEach() on NodeList objects without needing array conversion. Just not supported in all browsers, notably IE
              – charlietfl
              Nov 11 at 13:33











            • Hated in the community? What is the community? It's not hated in any community I'm part of.
              – JJJ
              Nov 11 at 22:10










            • @charlietfl Did not know NodeList objects allowed forEach(). Thanks!
              – jeporcher
              Nov 11 at 22:18















            Why the downvote though. A comment explaining the error would be appreciated.
            – saga
            Nov 11 at 13:11




            Why the downvote though. A comment explaining the error would be appreciated.
            – saga
            Nov 11 at 13:11




            1




            1




            Might also note that modern browsers do allow using methods like forEach() on NodeList objects without needing array conversion. Just not supported in all browsers, notably IE
            – charlietfl
            Nov 11 at 13:33





            Might also note that modern browsers do allow using methods like forEach() on NodeList objects without needing array conversion. Just not supported in all browsers, notably IE
            – charlietfl
            Nov 11 at 13:33













            Hated in the community? What is the community? It's not hated in any community I'm part of.
            – JJJ
            Nov 11 at 22:10




            Hated in the community? What is the community? It's not hated in any community I'm part of.
            – JJJ
            Nov 11 at 22:10












            @charlietfl Did not know NodeList objects allowed forEach(). Thanks!
            – jeporcher
            Nov 11 at 22:18




            @charlietfl Did not know NodeList objects allowed forEach(). Thanks!
            – jeporcher
            Nov 11 at 22:18

















            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%2f53248922%2fwhy-does-javascript-not-convert-array-like-objects-to-arrays%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

            Darth Vader #20

            How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

            Ondo