Why do I need to copy an array to use a method on it?











up vote
6
down vote

favorite












I can use Array() to have an array with a fixed number of undefined entries. For example



Array(2); // [empty × 2] 


But if I go and use the map method, say, on my new array, the entries are still undefined:



Array(2).map( () => "foo");  // [empty × 2] 


If I copy the array then map does work:



[...Array(2)].map( () => "foo");  // ["foo", "foo"]


Why do I need a copy to use the array?










share|improve this question






















  • what is the result of [...Array(2)]
    – Kain0_0
    2 hours ago










  • @Kain0_0 It is [undefined, undefined]. And Array.isArray(Array(2)) is true.
    – cham
    2 hours ago










  • Can use fill() also. Array(2).fill("foo"); // ["foo", "foo"] Just have to be careful with passing object to fill as all elements will be same reference
    – charlietfl
    2 hours ago

















up vote
6
down vote

favorite












I can use Array() to have an array with a fixed number of undefined entries. For example



Array(2); // [empty × 2] 


But if I go and use the map method, say, on my new array, the entries are still undefined:



Array(2).map( () => "foo");  // [empty × 2] 


If I copy the array then map does work:



[...Array(2)].map( () => "foo");  // ["foo", "foo"]


Why do I need a copy to use the array?










share|improve this question






















  • what is the result of [...Array(2)]
    – Kain0_0
    2 hours ago










  • @Kain0_0 It is [undefined, undefined]. And Array.isArray(Array(2)) is true.
    – cham
    2 hours ago










  • Can use fill() also. Array(2).fill("foo"); // ["foo", "foo"] Just have to be careful with passing object to fill as all elements will be same reference
    – charlietfl
    2 hours ago















up vote
6
down vote

favorite









up vote
6
down vote

favorite











I can use Array() to have an array with a fixed number of undefined entries. For example



Array(2); // [empty × 2] 


But if I go and use the map method, say, on my new array, the entries are still undefined:



Array(2).map( () => "foo");  // [empty × 2] 


If I copy the array then map does work:



[...Array(2)].map( () => "foo");  // ["foo", "foo"]


Why do I need a copy to use the array?










share|improve this question













I can use Array() to have an array with a fixed number of undefined entries. For example



Array(2); // [empty × 2] 


But if I go and use the map method, say, on my new array, the entries are still undefined:



Array(2).map( () => "foo");  // [empty × 2] 


If I copy the array then map does work:



[...Array(2)].map( () => "foo");  // ["foo", "foo"]


Why do I need a copy to use the array?







javascript arrays






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked 2 hours ago









cham

531618




531618












  • what is the result of [...Array(2)]
    – Kain0_0
    2 hours ago










  • @Kain0_0 It is [undefined, undefined]. And Array.isArray(Array(2)) is true.
    – cham
    2 hours ago










  • Can use fill() also. Array(2).fill("foo"); // ["foo", "foo"] Just have to be careful with passing object to fill as all elements will be same reference
    – charlietfl
    2 hours ago




















  • what is the result of [...Array(2)]
    – Kain0_0
    2 hours ago










  • @Kain0_0 It is [undefined, undefined]. And Array.isArray(Array(2)) is true.
    – cham
    2 hours ago










  • Can use fill() also. Array(2).fill("foo"); // ["foo", "foo"] Just have to be careful with passing object to fill as all elements will be same reference
    – charlietfl
    2 hours ago


















what is the result of [...Array(2)]
– Kain0_0
2 hours ago




what is the result of [...Array(2)]
– Kain0_0
2 hours ago












@Kain0_0 It is [undefined, undefined]. And Array.isArray(Array(2)) is true.
– cham
2 hours ago




@Kain0_0 It is [undefined, undefined]. And Array.isArray(Array(2)) is true.
– cham
2 hours ago












Can use fill() also. Array(2).fill("foo"); // ["foo", "foo"] Just have to be careful with passing object to fill as all elements will be same reference
– charlietfl
2 hours ago






Can use fill() also. Array(2).fill("foo"); // ["foo", "foo"] Just have to be careful with passing object to fill as all elements will be same reference
– charlietfl
2 hours ago














2 Answers
2






active

oldest

votes

















up vote
9
down vote



accepted










When you use Array(arrayLength) to create an array, you will have:




a new JavaScript array with its length property set to that number (Note: this implies an array of arrayLength empty slots, not slots with actual undefined values).




The array does not actually contain any values, not even undefined values - it simply has a length property.



When you spread an item with a length property into an array, eg [...{ length: 4 }], spread syntax accesses each index and sets the value at that index in the new array. For example:






const arr1 = ;
arr1.length = 4;
// arr1 does not actually have any index properties:
console.log('1' in arr1);

const arr2 = [...arr1];
console.log(arr2);
console.log('2' in arr2);





And .map only maps properties/values for which the property actually exists in the array you're mapping over.



Using the array constructor is confusing. I would suggest using Array.from instead, when creating arrays from scratch - you can pass it an object with a length property, as well as a mapping function:






const arr = Array.from(
{ length: 2 },
() => 'foo'
);
console.log(arr);








share|improve this answer





















  • I saw Array() in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.
    – cham
    2 hours ago












  • It used to be a decent option, before Array.from was available, but now I don't think there's any reason to use it, it has too much potential for confusion.
    – CertainPerformance
    2 hours ago


















up vote
3
down vote













The reason is that the array element is unassigned. See here the first paragraph of the description. ... callback is invoked only for indexes of the array which have assigned values, including undefined.



Consider:



var array1 = Array(2);
array1[0] = undefined;

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(array1);
console.log(map1);


Outputs:



Array [undefined, undefined]
Array [NaN, undefined]


When the array is printed each of its elements are interrogated. The first has been assigned undefined the other is defaulted to undefined.



The mapping operation calls the mapping operation for the first element because it has been defined (through assignment). It does not call the mapping operation for the second argument, and simply passes out undefined.






share|improve this answer








New contributor




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


















    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',
    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%2f53491943%2fwhy-do-i-need-to-copy-an-array-to-use-a-method-on-it%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








    up vote
    9
    down vote



    accepted










    When you use Array(arrayLength) to create an array, you will have:




    a new JavaScript array with its length property set to that number (Note: this implies an array of arrayLength empty slots, not slots with actual undefined values).




    The array does not actually contain any values, not even undefined values - it simply has a length property.



    When you spread an item with a length property into an array, eg [...{ length: 4 }], spread syntax accesses each index and sets the value at that index in the new array. For example:






    const arr1 = ;
    arr1.length = 4;
    // arr1 does not actually have any index properties:
    console.log('1' in arr1);

    const arr2 = [...arr1];
    console.log(arr2);
    console.log('2' in arr2);





    And .map only maps properties/values for which the property actually exists in the array you're mapping over.



    Using the array constructor is confusing. I would suggest using Array.from instead, when creating arrays from scratch - you can pass it an object with a length property, as well as a mapping function:






    const arr = Array.from(
    { length: 2 },
    () => 'foo'
    );
    console.log(arr);








    share|improve this answer





















    • I saw Array() in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.
      – cham
      2 hours ago












    • It used to be a decent option, before Array.from was available, but now I don't think there's any reason to use it, it has too much potential for confusion.
      – CertainPerformance
      2 hours ago















    up vote
    9
    down vote



    accepted










    When you use Array(arrayLength) to create an array, you will have:




    a new JavaScript array with its length property set to that number (Note: this implies an array of arrayLength empty slots, not slots with actual undefined values).




    The array does not actually contain any values, not even undefined values - it simply has a length property.



    When you spread an item with a length property into an array, eg [...{ length: 4 }], spread syntax accesses each index and sets the value at that index in the new array. For example:






    const arr1 = ;
    arr1.length = 4;
    // arr1 does not actually have any index properties:
    console.log('1' in arr1);

    const arr2 = [...arr1];
    console.log(arr2);
    console.log('2' in arr2);





    And .map only maps properties/values for which the property actually exists in the array you're mapping over.



    Using the array constructor is confusing. I would suggest using Array.from instead, when creating arrays from scratch - you can pass it an object with a length property, as well as a mapping function:






    const arr = Array.from(
    { length: 2 },
    () => 'foo'
    );
    console.log(arr);








    share|improve this answer





















    • I saw Array() in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.
      – cham
      2 hours ago












    • It used to be a decent option, before Array.from was available, but now I don't think there's any reason to use it, it has too much potential for confusion.
      – CertainPerformance
      2 hours ago













    up vote
    9
    down vote



    accepted







    up vote
    9
    down vote



    accepted






    When you use Array(arrayLength) to create an array, you will have:




    a new JavaScript array with its length property set to that number (Note: this implies an array of arrayLength empty slots, not slots with actual undefined values).




    The array does not actually contain any values, not even undefined values - it simply has a length property.



    When you spread an item with a length property into an array, eg [...{ length: 4 }], spread syntax accesses each index and sets the value at that index in the new array. For example:






    const arr1 = ;
    arr1.length = 4;
    // arr1 does not actually have any index properties:
    console.log('1' in arr1);

    const arr2 = [...arr1];
    console.log(arr2);
    console.log('2' in arr2);





    And .map only maps properties/values for which the property actually exists in the array you're mapping over.



    Using the array constructor is confusing. I would suggest using Array.from instead, when creating arrays from scratch - you can pass it an object with a length property, as well as a mapping function:






    const arr = Array.from(
    { length: 2 },
    () => 'foo'
    );
    console.log(arr);








    share|improve this answer












    When you use Array(arrayLength) to create an array, you will have:




    a new JavaScript array with its length property set to that number (Note: this implies an array of arrayLength empty slots, not slots with actual undefined values).




    The array does not actually contain any values, not even undefined values - it simply has a length property.



    When you spread an item with a length property into an array, eg [...{ length: 4 }], spread syntax accesses each index and sets the value at that index in the new array. For example:






    const arr1 = ;
    arr1.length = 4;
    // arr1 does not actually have any index properties:
    console.log('1' in arr1);

    const arr2 = [...arr1];
    console.log(arr2);
    console.log('2' in arr2);





    And .map only maps properties/values for which the property actually exists in the array you're mapping over.



    Using the array constructor is confusing. I would suggest using Array.from instead, when creating arrays from scratch - you can pass it an object with a length property, as well as a mapping function:






    const arr = Array.from(
    { length: 2 },
    () => 'foo'
    );
    console.log(arr);








    const arr1 = ;
    arr1.length = 4;
    // arr1 does not actually have any index properties:
    console.log('1' in arr1);

    const arr2 = [...arr1];
    console.log(arr2);
    console.log('2' in arr2);





    const arr1 = ;
    arr1.length = 4;
    // arr1 does not actually have any index properties:
    console.log('1' in arr1);

    const arr2 = [...arr1];
    console.log(arr2);
    console.log('2' in arr2);





    const arr = Array.from(
    { length: 2 },
    () => 'foo'
    );
    console.log(arr);





    const arr = Array.from(
    { length: 2 },
    () => 'foo'
    );
    console.log(arr);






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered 2 hours ago









    CertainPerformance

    67.2k143252




    67.2k143252












    • I saw Array() in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.
      – cham
      2 hours ago












    • It used to be a decent option, before Array.from was available, but now I don't think there's any reason to use it, it has too much potential for confusion.
      – CertainPerformance
      2 hours ago


















    • I saw Array() in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.
      – cham
      2 hours ago












    • It used to be a decent option, before Array.from was available, but now I don't think there's any reason to use it, it has too much potential for confusion.
      – CertainPerformance
      2 hours ago
















    I saw Array() in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.
    – cham
    2 hours ago






    I saw Array() in a course and it reminded me of something useful in Python, But sadly it's maybe it's not so useful. Cheers.
    – cham
    2 hours ago














    It used to be a decent option, before Array.from was available, but now I don't think there's any reason to use it, it has too much potential for confusion.
    – CertainPerformance
    2 hours ago




    It used to be a decent option, before Array.from was available, but now I don't think there's any reason to use it, it has too much potential for confusion.
    – CertainPerformance
    2 hours ago












    up vote
    3
    down vote













    The reason is that the array element is unassigned. See here the first paragraph of the description. ... callback is invoked only for indexes of the array which have assigned values, including undefined.



    Consider:



    var array1 = Array(2);
    array1[0] = undefined;

    // pass a function to map
    const map1 = array1.map(x => x * 2);

    console.log(array1);
    console.log(map1);


    Outputs:



    Array [undefined, undefined]
    Array [NaN, undefined]


    When the array is printed each of its elements are interrogated. The first has been assigned undefined the other is defaulted to undefined.



    The mapping operation calls the mapping operation for the first element because it has been defined (through assignment). It does not call the mapping operation for the second argument, and simply passes out undefined.






    share|improve this answer








    New contributor




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






















      up vote
      3
      down vote













      The reason is that the array element is unassigned. See here the first paragraph of the description. ... callback is invoked only for indexes of the array which have assigned values, including undefined.



      Consider:



      var array1 = Array(2);
      array1[0] = undefined;

      // pass a function to map
      const map1 = array1.map(x => x * 2);

      console.log(array1);
      console.log(map1);


      Outputs:



      Array [undefined, undefined]
      Array [NaN, undefined]


      When the array is printed each of its elements are interrogated. The first has been assigned undefined the other is defaulted to undefined.



      The mapping operation calls the mapping operation for the first element because it has been defined (through assignment). It does not call the mapping operation for the second argument, and simply passes out undefined.






      share|improve this answer








      New contributor




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




















        up vote
        3
        down vote










        up vote
        3
        down vote









        The reason is that the array element is unassigned. See here the first paragraph of the description. ... callback is invoked only for indexes of the array which have assigned values, including undefined.



        Consider:



        var array1 = Array(2);
        array1[0] = undefined;

        // pass a function to map
        const map1 = array1.map(x => x * 2);

        console.log(array1);
        console.log(map1);


        Outputs:



        Array [undefined, undefined]
        Array [NaN, undefined]


        When the array is printed each of its elements are interrogated. The first has been assigned undefined the other is defaulted to undefined.



        The mapping operation calls the mapping operation for the first element because it has been defined (through assignment). It does not call the mapping operation for the second argument, and simply passes out undefined.






        share|improve this answer








        New contributor




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









        The reason is that the array element is unassigned. See here the first paragraph of the description. ... callback is invoked only for indexes of the array which have assigned values, including undefined.



        Consider:



        var array1 = Array(2);
        array1[0] = undefined;

        // pass a function to map
        const map1 = array1.map(x => x * 2);

        console.log(array1);
        console.log(map1);


        Outputs:



        Array [undefined, undefined]
        Array [NaN, undefined]


        When the array is printed each of its elements are interrogated. The first has been assigned undefined the other is defaulted to undefined.



        The mapping operation calls the mapping operation for the first element because it has been defined (through assignment). It does not call the mapping operation for the second argument, and simply passes out undefined.







        share|improve this answer








        New contributor




        Kain0_0 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 answer



        share|improve this answer






        New contributor




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









        answered 2 hours ago









        Kain0_0

        1311




        1311




        New contributor




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





        New contributor





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






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






























             

            draft saved


            draft discarded



















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53491943%2fwhy-do-i-need-to-copy-an-array-to-use-a-method-on-it%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

            What visual should I use to simply compare current year value vs last year in Power BI desktop

            Alexandru Averescu

            Trompette piccolo