Confused for loop in react










1















componentDidMount() 
for (let i = 0; i < 3; i++)
let i = 'not a number'
console.log(i) // output only one time



componentDidMount()
let i = 5 // add one line...
for (let i = 0; i < 3; i++)
let i = 'not a number'
console.log(i) // output three times




Please notice that output times, if run these loops in browser directly, both these codes will output three times, but in react, it outputs only one time in for loop.










share|improve this question






















  • Both are giving same output in react please check once again.

    – Narendra Jadhav
    Nov 15 '18 at 4:38
















1















componentDidMount() 
for (let i = 0; i < 3; i++)
let i = 'not a number'
console.log(i) // output only one time



componentDidMount()
let i = 5 // add one line...
for (let i = 0; i < 3; i++)
let i = 'not a number'
console.log(i) // output three times




Please notice that output times, if run these loops in browser directly, both these codes will output three times, but in react, it outputs only one time in for loop.










share|improve this question






















  • Both are giving same output in react please check once again.

    – Narendra Jadhav
    Nov 15 '18 at 4:38














1












1








1








componentDidMount() 
for (let i = 0; i < 3; i++)
let i = 'not a number'
console.log(i) // output only one time



componentDidMount()
let i = 5 // add one line...
for (let i = 0; i < 3; i++)
let i = 'not a number'
console.log(i) // output three times




Please notice that output times, if run these loops in browser directly, both these codes will output three times, but in react, it outputs only one time in for loop.










share|improve this question














componentDidMount() 
for (let i = 0; i < 3; i++)
let i = 'not a number'
console.log(i) // output only one time



componentDidMount()
let i = 5 // add one line...
for (let i = 0; i < 3; i++)
let i = 'not a number'
console.log(i) // output three times




Please notice that output times, if run these loops in browser directly, both these codes will output three times, but in react, it outputs only one time in for loop.







reactjs loops for-loop






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 15 '18 at 4:19









kd.xiakd.xia

83




83












  • Both are giving same output in react please check once again.

    – Narendra Jadhav
    Nov 15 '18 at 4:38


















  • Both are giving same output in react please check once again.

    – Narendra Jadhav
    Nov 15 '18 at 4:38

















Both are giving same output in react please check once again.

– Narendra Jadhav
Nov 15 '18 at 4:38






Both are giving same output in react please check once again.

– Narendra Jadhav
Nov 15 '18 at 4:38













1 Answer
1






active

oldest

votes


















2














How do I fix it?



Change the second variable name



Why?



With your React environment, you are most likely using a JS compiler like Babel. Babel will take your code and make it runnable in most browsers, with this you have to get rid of const and let as some browsers don't support them, babel does this for you and replaces them with var.



What's the difference? const and let are block scoped but var is function scoped. So your variable i get hoisted (moved) to the top of the "function" and shared by everyone. const and let are block scoped so they are only visible to their respective scopes, the i declared in the for loop's initializer can be seen by the initializer and the block of code following, but if you declare another variable i in the follow block they become two different variables like such:



for (let i = 0; i < 3; i++) 
// they act like two different variables and are independent of each other
let g = 'not a number'
console.log(g)

// 1: i = 0, g (inner i) = 'not a number'
// 2: i = 1, g (inner i) = 'not a number'
// 3: i = 2, g (inner i) = 'not a number'


While React gets compiled to something like this



// variable i gets hoisted to the top
var i;
for (i = 0; i < 3; i++)
i = 'not a number'
console.log(i)

// 1: i = 0
// 2: i = 'not a number' ('not a number' < 3 is false)





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%2f53312389%2fconfused-for-loop-in-react%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    2














    How do I fix it?



    Change the second variable name



    Why?



    With your React environment, you are most likely using a JS compiler like Babel. Babel will take your code and make it runnable in most browsers, with this you have to get rid of const and let as some browsers don't support them, babel does this for you and replaces them with var.



    What's the difference? const and let are block scoped but var is function scoped. So your variable i get hoisted (moved) to the top of the "function" and shared by everyone. const and let are block scoped so they are only visible to their respective scopes, the i declared in the for loop's initializer can be seen by the initializer and the block of code following, but if you declare another variable i in the follow block they become two different variables like such:



    for (let i = 0; i < 3; i++) 
    // they act like two different variables and are independent of each other
    let g = 'not a number'
    console.log(g)

    // 1: i = 0, g (inner i) = 'not a number'
    // 2: i = 1, g (inner i) = 'not a number'
    // 3: i = 2, g (inner i) = 'not a number'


    While React gets compiled to something like this



    // variable i gets hoisted to the top
    var i;
    for (i = 0; i < 3; i++)
    i = 'not a number'
    console.log(i)

    // 1: i = 0
    // 2: i = 'not a number' ('not a number' < 3 is false)





    share|improve this answer



























      2














      How do I fix it?



      Change the second variable name



      Why?



      With your React environment, you are most likely using a JS compiler like Babel. Babel will take your code and make it runnable in most browsers, with this you have to get rid of const and let as some browsers don't support them, babel does this for you and replaces them with var.



      What's the difference? const and let are block scoped but var is function scoped. So your variable i get hoisted (moved) to the top of the "function" and shared by everyone. const and let are block scoped so they are only visible to their respective scopes, the i declared in the for loop's initializer can be seen by the initializer and the block of code following, but if you declare another variable i in the follow block they become two different variables like such:



      for (let i = 0; i < 3; i++) 
      // they act like two different variables and are independent of each other
      let g = 'not a number'
      console.log(g)

      // 1: i = 0, g (inner i) = 'not a number'
      // 2: i = 1, g (inner i) = 'not a number'
      // 3: i = 2, g (inner i) = 'not a number'


      While React gets compiled to something like this



      // variable i gets hoisted to the top
      var i;
      for (i = 0; i < 3; i++)
      i = 'not a number'
      console.log(i)

      // 1: i = 0
      // 2: i = 'not a number' ('not a number' < 3 is false)





      share|improve this answer

























        2












        2








        2







        How do I fix it?



        Change the second variable name



        Why?



        With your React environment, you are most likely using a JS compiler like Babel. Babel will take your code and make it runnable in most browsers, with this you have to get rid of const and let as some browsers don't support them, babel does this for you and replaces them with var.



        What's the difference? const and let are block scoped but var is function scoped. So your variable i get hoisted (moved) to the top of the "function" and shared by everyone. const and let are block scoped so they are only visible to their respective scopes, the i declared in the for loop's initializer can be seen by the initializer and the block of code following, but if you declare another variable i in the follow block they become two different variables like such:



        for (let i = 0; i < 3; i++) 
        // they act like two different variables and are independent of each other
        let g = 'not a number'
        console.log(g)

        // 1: i = 0, g (inner i) = 'not a number'
        // 2: i = 1, g (inner i) = 'not a number'
        // 3: i = 2, g (inner i) = 'not a number'


        While React gets compiled to something like this



        // variable i gets hoisted to the top
        var i;
        for (i = 0; i < 3; i++)
        i = 'not a number'
        console.log(i)

        // 1: i = 0
        // 2: i = 'not a number' ('not a number' < 3 is false)





        share|improve this answer













        How do I fix it?



        Change the second variable name



        Why?



        With your React environment, you are most likely using a JS compiler like Babel. Babel will take your code and make it runnable in most browsers, with this you have to get rid of const and let as some browsers don't support them, babel does this for you and replaces them with var.



        What's the difference? const and let are block scoped but var is function scoped. So your variable i get hoisted (moved) to the top of the "function" and shared by everyone. const and let are block scoped so they are only visible to their respective scopes, the i declared in the for loop's initializer can be seen by the initializer and the block of code following, but if you declare another variable i in the follow block they become two different variables like such:



        for (let i = 0; i < 3; i++) 
        // they act like two different variables and are independent of each other
        let g = 'not a number'
        console.log(g)

        // 1: i = 0, g (inner i) = 'not a number'
        // 2: i = 1, g (inner i) = 'not a number'
        // 3: i = 2, g (inner i) = 'not a number'


        While React gets compiled to something like this



        // variable i gets hoisted to the top
        var i;
        for (i = 0; i < 3; i++)
        i = 'not a number'
        console.log(i)

        // 1: i = 0
        // 2: i = 'not a number' ('not a number' < 3 is false)






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 15 '18 at 4:48









        dotconnordotconnor

        1,072220




        1,072220





























            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.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53312389%2fconfused-for-loop-in-react%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

            Top Tejano songwriter Luis Silva dead of heart attack at 64

            政党

            天津地下鉄3号線