JavaScript 'hoisting' [duplicate]

Multi tool use
Multi tool use












80
















This question already has an answer here:




  • Javascript function scoping and hoisting

    15 answers




I came across JavaScript 'hoisting' and I didn't figure out how this snippet of code really functions:



var a = 1;

function b() {
a = 10;
return;

function a() {}
}

b();
alert(a);


I know that function declaration like ( function a() {} ) is going to be hoisted to the top of the function b scope but it should not override the value of a (because function declarations override variable declarations but not variable initialization) so I expected that the value of the alert would be 10 instead of 1!!










share|improve this question















marked as duplicate by apsillers javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 21 '15 at 19:37


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • Hoisting is JavaScript's default behavior of moving declarations to the top. (function declarations are "moved" from where they appear in the flow of the code to the top of the code. This gives rise to the name "Hoisting".) Read more

    – M98
    Sep 6 '16 at 11:51













  • Here is a link with easy explanation about "Function expressions vs. function declarations and Hoisting" ... gomakethings.com/function-expressions-vs-function-declarations

    – S. Mayol
    Oct 12 '18 at 2:12
















80
















This question already has an answer here:




  • Javascript function scoping and hoisting

    15 answers




I came across JavaScript 'hoisting' and I didn't figure out how this snippet of code really functions:



var a = 1;

function b() {
a = 10;
return;

function a() {}
}

b();
alert(a);


I know that function declaration like ( function a() {} ) is going to be hoisted to the top of the function b scope but it should not override the value of a (because function declarations override variable declarations but not variable initialization) so I expected that the value of the alert would be 10 instead of 1!!










share|improve this question















marked as duplicate by apsillers javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 21 '15 at 19:37


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • Hoisting is JavaScript's default behavior of moving declarations to the top. (function declarations are "moved" from where they appear in the flow of the code to the top of the code. This gives rise to the name "Hoisting".) Read more

    – M98
    Sep 6 '16 at 11:51













  • Here is a link with easy explanation about "Function expressions vs. function declarations and Hoisting" ... gomakethings.com/function-expressions-vs-function-declarations

    – S. Mayol
    Oct 12 '18 at 2:12














80












80








80


31







This question already has an answer here:




  • Javascript function scoping and hoisting

    15 answers




I came across JavaScript 'hoisting' and I didn't figure out how this snippet of code really functions:



var a = 1;

function b() {
a = 10;
return;

function a() {}
}

b();
alert(a);


I know that function declaration like ( function a() {} ) is going to be hoisted to the top of the function b scope but it should not override the value of a (because function declarations override variable declarations but not variable initialization) so I expected that the value of the alert would be 10 instead of 1!!










share|improve this question

















This question already has an answer here:




  • Javascript function scoping and hoisting

    15 answers




I came across JavaScript 'hoisting' and I didn't figure out how this snippet of code really functions:



var a = 1;

function b() {
a = 10;
return;

function a() {}
}

b();
alert(a);


I know that function declaration like ( function a() {} ) is going to be hoisted to the top of the function b scope but it should not override the value of a (because function declarations override variable declarations but not variable initialization) so I expected that the value of the alert would be 10 instead of 1!!





This question already has an answer here:




  • Javascript function scoping and hoisting

    15 answers








javascript hoisting






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 9 '13 at 13:24









0x499602D2

68.2k26120207




68.2k26120207










asked Mar 9 '13 at 13:22









morfiocemorfioce

554611




554611




marked as duplicate by apsillers javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 21 '15 at 19:37


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.









marked as duplicate by apsillers javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 21 '15 at 19:37


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • Hoisting is JavaScript's default behavior of moving declarations to the top. (function declarations are "moved" from where they appear in the flow of the code to the top of the code. This gives rise to the name "Hoisting".) Read more

    – M98
    Sep 6 '16 at 11:51













  • Here is a link with easy explanation about "Function expressions vs. function declarations and Hoisting" ... gomakethings.com/function-expressions-vs-function-declarations

    – S. Mayol
    Oct 12 '18 at 2:12



















  • Hoisting is JavaScript's default behavior of moving declarations to the top. (function declarations are "moved" from where they appear in the flow of the code to the top of the code. This gives rise to the name "Hoisting".) Read more

    – M98
    Sep 6 '16 at 11:51













  • Here is a link with easy explanation about "Function expressions vs. function declarations and Hoisting" ... gomakethings.com/function-expressions-vs-function-declarations

    – S. Mayol
    Oct 12 '18 at 2:12

















Hoisting is JavaScript's default behavior of moving declarations to the top. (function declarations are "moved" from where they appear in the flow of the code to the top of the code. This gives rise to the name "Hoisting".) Read more

– M98
Sep 6 '16 at 11:51







Hoisting is JavaScript's default behavior of moving declarations to the top. (function declarations are "moved" from where they appear in the flow of the code to the top of the code. This gives rise to the name "Hoisting".) Read more

– M98
Sep 6 '16 at 11:51















Here is a link with easy explanation about "Function expressions vs. function declarations and Hoisting" ... gomakethings.com/function-expressions-vs-function-declarations

– S. Mayol
Oct 12 '18 at 2:12





Here is a link with easy explanation about "Function expressions vs. function declarations and Hoisting" ... gomakethings.com/function-expressions-vs-function-declarations

– S. Mayol
Oct 12 '18 at 2:12












5 Answers
5






active

oldest

votes


















110















  1. The global a is set to 1


  2. b() is called


  3. function a() {} is hoisted and creates a local variable a that masks the global a

  4. The local a is set to 10 (overwriting the function a)

  5. The global a (still 1) is alerted






share|improve this answer



















  • 2





    thank you @Quentin I was missing the fact number 3 (that function a() {} creates a local variable that masks the global a)

    – morfioce
    Mar 9 '13 at 13:36











  • @Quentin: Can you please show with code how the function would look with hoisting?

    – SharpCoder
    Apr 27 '14 at 15:02











  • @Brown_Dynamite — It looks like it looks in the question. It functions in the order described in this answer.

    – Quentin
    Apr 27 '14 at 15:08











  • So if a was not hoisted, calling function b() would set a = 10 globally, alert(a) would then output 10? If I'm understanding correctly?

    – Kenny Worden
    May 27 '15 at 16:50






  • 1





    The best way to understand hoisting is to talk like a compiler, Grate

    – M98
    Sep 6 '16 at 11:59



















6














It's because the order of compilation/interpretation in this example is somewhat misleading. The function a () {} line is interpreted before any of the rest of the function is executed, so at the very beginning of the function, a has the value of function a () {}. When you reassign it to 10, you are reassigning the value of a in the local scope of function b(), which is then discarded once you return, leaving the original value of a = 1 in the global scope.



You can verify this by placing alert()s or the like in the appropriate places to see what the value of a is at various points.






share|improve this answer































    5















    (1) JavaScript does not have block statement scope; rather, it will be local to the code that the block resides within.



    (2) Javascript's declaration of variables in a function scope, meaning that variables declared in a function are available anywhere in that function, even before they are assigned a value.



    (3) Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable.




    you code is same as: (read comment)



    <script>
    var a = 1; //global a = 1
    function b() {
    a = 10;
    var a = 20; //local a = 20
    }
    b();
    alert(a); //global a = 1
    </script>


    reference:

    (1) JavaScript Variable Scope:

    (2) A Dangerous Example of Javascript Hoisting

    (3) Variable scope



    So in your code:



    var a = 1;          //global a = 1  
    function b() {
    a = 10;
    return;
    function a() {} //local
    }
    b();
    alert(a); //global a = 1





    share|improve this answer


























    • where you wrote "local a Undefined" - that's actually not true. function declarations are parsed before any content of the parent scope, so in this case when you assign a = 10, you are already overriding function a() {} with value 10. See Quentin's answer

      – rochal
      Mar 11 '13 at 21:54











    • @rochal No, please read this article Javascript hoisting can be especially nefarious in loops Also check code on safari browser...let me know And Yes its a=10 on most browser ..Actually Undefined behaviour not ERROR

      – Grijesh Chauhan
      Mar 12 '13 at 4:12











    • read point 4. from Quentin's answer. At this point a already exists - it's a function, not an Undefined. How would Safari be different to i.e. Chrome..?

      – rochal
      Mar 12 '13 at 9:08











    • @rochal variables declared in a function are available anywhere in that function, even before they are assigned a value I also checked it, and giving 10 But according to three tutorials (I given link) it should be undefined and 10 is result because of undefined. Quentin answered according to output but I think it may be not 10 for some browsers..

      – Grijesh Chauhan
      Mar 13 '13 at 4:15











    • once again, in your example code: a = 10; //local a Undefined is incorrect a = 10; //local a is function(){} is correct because as soon as you check the value of a inside function b() it already has been overridden by the local function a(){} so your comment that "local a Undefined" is not valid. And browser has nothing to do with it, it's a language feature.

      – rochal
      Mar 13 '13 at 4:39



















    2















    1. function declaration function a(){} is hoisted first, hence in local scope a is created.

    2. If you have two variable with same name (one in global another in local), local variable always get precedence over global variable.

    3. When you set a=10, you are setting the local variable a , not the global one.


    Hence, the value of global variable remain same and you get, alerted 1






    share|improve this answer

































      0














      When I read the same article you did JavaScript Scoping and Hoisting, I was confused as well because the author never showed what the two opening example codes are interpreted as in the compiler.



      Here is example you provided, and the second on the page:



      var a = 1;
      function b() {
      function a() {} // declares 'a' as a function, which is always local
      a = 10;
      return;
      }
      b();
      alert(a);


      and here is the first example on the page:



      var foo = 1;
      function bar() {
      var foo; // a new local 'foo' variable
      if (!foo) {
      foo = 10;
      }
      alert(foo);
      }
      bar();


      Hope this helps






      share|improve this answer
























      • I believe that article explains the hoisting topic quite good 2n.pl/blog/javascript-part-4

        – Adam Piotrowski
        Apr 9 '18 at 10:18


















      5 Answers
      5






      active

      oldest

      votes








      5 Answers
      5






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      110















      1. The global a is set to 1


      2. b() is called


      3. function a() {} is hoisted and creates a local variable a that masks the global a

      4. The local a is set to 10 (overwriting the function a)

      5. The global a (still 1) is alerted






      share|improve this answer



















      • 2





        thank you @Quentin I was missing the fact number 3 (that function a() {} creates a local variable that masks the global a)

        – morfioce
        Mar 9 '13 at 13:36











      • @Quentin: Can you please show with code how the function would look with hoisting?

        – SharpCoder
        Apr 27 '14 at 15:02











      • @Brown_Dynamite — It looks like it looks in the question. It functions in the order described in this answer.

        – Quentin
        Apr 27 '14 at 15:08











      • So if a was not hoisted, calling function b() would set a = 10 globally, alert(a) would then output 10? If I'm understanding correctly?

        – Kenny Worden
        May 27 '15 at 16:50






      • 1





        The best way to understand hoisting is to talk like a compiler, Grate

        – M98
        Sep 6 '16 at 11:59
















      110















      1. The global a is set to 1


      2. b() is called


      3. function a() {} is hoisted and creates a local variable a that masks the global a

      4. The local a is set to 10 (overwriting the function a)

      5. The global a (still 1) is alerted






      share|improve this answer



















      • 2





        thank you @Quentin I was missing the fact number 3 (that function a() {} creates a local variable that masks the global a)

        – morfioce
        Mar 9 '13 at 13:36











      • @Quentin: Can you please show with code how the function would look with hoisting?

        – SharpCoder
        Apr 27 '14 at 15:02











      • @Brown_Dynamite — It looks like it looks in the question. It functions in the order described in this answer.

        – Quentin
        Apr 27 '14 at 15:08











      • So if a was not hoisted, calling function b() would set a = 10 globally, alert(a) would then output 10? If I'm understanding correctly?

        – Kenny Worden
        May 27 '15 at 16:50






      • 1





        The best way to understand hoisting is to talk like a compiler, Grate

        – M98
        Sep 6 '16 at 11:59














      110












      110








      110








      1. The global a is set to 1


      2. b() is called


      3. function a() {} is hoisted and creates a local variable a that masks the global a

      4. The local a is set to 10 (overwriting the function a)

      5. The global a (still 1) is alerted






      share|improve this answer














      1. The global a is set to 1


      2. b() is called


      3. function a() {} is hoisted and creates a local variable a that masks the global a

      4. The local a is set to 10 (overwriting the function a)

      5. The global a (still 1) is alerted







      share|improve this answer












      share|improve this answer



      share|improve this answer










      answered Mar 9 '13 at 13:26









      QuentinQuentin

      655k728911055




      655k728911055








      • 2





        thank you @Quentin I was missing the fact number 3 (that function a() {} creates a local variable that masks the global a)

        – morfioce
        Mar 9 '13 at 13:36











      • @Quentin: Can you please show with code how the function would look with hoisting?

        – SharpCoder
        Apr 27 '14 at 15:02











      • @Brown_Dynamite — It looks like it looks in the question. It functions in the order described in this answer.

        – Quentin
        Apr 27 '14 at 15:08











      • So if a was not hoisted, calling function b() would set a = 10 globally, alert(a) would then output 10? If I'm understanding correctly?

        – Kenny Worden
        May 27 '15 at 16:50






      • 1





        The best way to understand hoisting is to talk like a compiler, Grate

        – M98
        Sep 6 '16 at 11:59














      • 2





        thank you @Quentin I was missing the fact number 3 (that function a() {} creates a local variable that masks the global a)

        – morfioce
        Mar 9 '13 at 13:36











      • @Quentin: Can you please show with code how the function would look with hoisting?

        – SharpCoder
        Apr 27 '14 at 15:02











      • @Brown_Dynamite — It looks like it looks in the question. It functions in the order described in this answer.

        – Quentin
        Apr 27 '14 at 15:08











      • So if a was not hoisted, calling function b() would set a = 10 globally, alert(a) would then output 10? If I'm understanding correctly?

        – Kenny Worden
        May 27 '15 at 16:50






      • 1





        The best way to understand hoisting is to talk like a compiler, Grate

        – M98
        Sep 6 '16 at 11:59








      2




      2





      thank you @Quentin I was missing the fact number 3 (that function a() {} creates a local variable that masks the global a)

      – morfioce
      Mar 9 '13 at 13:36





      thank you @Quentin I was missing the fact number 3 (that function a() {} creates a local variable that masks the global a)

      – morfioce
      Mar 9 '13 at 13:36













      @Quentin: Can you please show with code how the function would look with hoisting?

      – SharpCoder
      Apr 27 '14 at 15:02





      @Quentin: Can you please show with code how the function would look with hoisting?

      – SharpCoder
      Apr 27 '14 at 15:02













      @Brown_Dynamite — It looks like it looks in the question. It functions in the order described in this answer.

      – Quentin
      Apr 27 '14 at 15:08





      @Brown_Dynamite — It looks like it looks in the question. It functions in the order described in this answer.

      – Quentin
      Apr 27 '14 at 15:08













      So if a was not hoisted, calling function b() would set a = 10 globally, alert(a) would then output 10? If I'm understanding correctly?

      – Kenny Worden
      May 27 '15 at 16:50





      So if a was not hoisted, calling function b() would set a = 10 globally, alert(a) would then output 10? If I'm understanding correctly?

      – Kenny Worden
      May 27 '15 at 16:50




      1




      1





      The best way to understand hoisting is to talk like a compiler, Grate

      – M98
      Sep 6 '16 at 11:59





      The best way to understand hoisting is to talk like a compiler, Grate

      – M98
      Sep 6 '16 at 11:59













      6














      It's because the order of compilation/interpretation in this example is somewhat misleading. The function a () {} line is interpreted before any of the rest of the function is executed, so at the very beginning of the function, a has the value of function a () {}. When you reassign it to 10, you are reassigning the value of a in the local scope of function b(), which is then discarded once you return, leaving the original value of a = 1 in the global scope.



      You can verify this by placing alert()s or the like in the appropriate places to see what the value of a is at various points.






      share|improve this answer




























        6














        It's because the order of compilation/interpretation in this example is somewhat misleading. The function a () {} line is interpreted before any of the rest of the function is executed, so at the very beginning of the function, a has the value of function a () {}. When you reassign it to 10, you are reassigning the value of a in the local scope of function b(), which is then discarded once you return, leaving the original value of a = 1 in the global scope.



        You can verify this by placing alert()s or the like in the appropriate places to see what the value of a is at various points.






        share|improve this answer


























          6












          6








          6







          It's because the order of compilation/interpretation in this example is somewhat misleading. The function a () {} line is interpreted before any of the rest of the function is executed, so at the very beginning of the function, a has the value of function a () {}. When you reassign it to 10, you are reassigning the value of a in the local scope of function b(), which is then discarded once you return, leaving the original value of a = 1 in the global scope.



          You can verify this by placing alert()s or the like in the appropriate places to see what the value of a is at various points.






          share|improve this answer













          It's because the order of compilation/interpretation in this example is somewhat misleading. The function a () {} line is interpreted before any of the rest of the function is executed, so at the very beginning of the function, a has the value of function a () {}. When you reassign it to 10, you are reassigning the value of a in the local scope of function b(), which is then discarded once you return, leaving the original value of a = 1 in the global scope.



          You can verify this by placing alert()s or the like in the appropriate places to see what the value of a is at various points.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Mar 9 '13 at 13:35









          fraveydankfraveydank

          612




          612























              5















              (1) JavaScript does not have block statement scope; rather, it will be local to the code that the block resides within.



              (2) Javascript's declaration of variables in a function scope, meaning that variables declared in a function are available anywhere in that function, even before they are assigned a value.



              (3) Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable.




              you code is same as: (read comment)



              <script>
              var a = 1; //global a = 1
              function b() {
              a = 10;
              var a = 20; //local a = 20
              }
              b();
              alert(a); //global a = 1
              </script>


              reference:

              (1) JavaScript Variable Scope:

              (2) A Dangerous Example of Javascript Hoisting

              (3) Variable scope



              So in your code:



              var a = 1;          //global a = 1  
              function b() {
              a = 10;
              return;
              function a() {} //local
              }
              b();
              alert(a); //global a = 1





              share|improve this answer


























              • where you wrote "local a Undefined" - that's actually not true. function declarations are parsed before any content of the parent scope, so in this case when you assign a = 10, you are already overriding function a() {} with value 10. See Quentin's answer

                – rochal
                Mar 11 '13 at 21:54











              • @rochal No, please read this article Javascript hoisting can be especially nefarious in loops Also check code on safari browser...let me know And Yes its a=10 on most browser ..Actually Undefined behaviour not ERROR

                – Grijesh Chauhan
                Mar 12 '13 at 4:12











              • read point 4. from Quentin's answer. At this point a already exists - it's a function, not an Undefined. How would Safari be different to i.e. Chrome..?

                – rochal
                Mar 12 '13 at 9:08











              • @rochal variables declared in a function are available anywhere in that function, even before they are assigned a value I also checked it, and giving 10 But according to three tutorials (I given link) it should be undefined and 10 is result because of undefined. Quentin answered according to output but I think it may be not 10 for some browsers..

                – Grijesh Chauhan
                Mar 13 '13 at 4:15











              • once again, in your example code: a = 10; //local a Undefined is incorrect a = 10; //local a is function(){} is correct because as soon as you check the value of a inside function b() it already has been overridden by the local function a(){} so your comment that "local a Undefined" is not valid. And browser has nothing to do with it, it's a language feature.

                – rochal
                Mar 13 '13 at 4:39
















              5















              (1) JavaScript does not have block statement scope; rather, it will be local to the code that the block resides within.



              (2) Javascript's declaration of variables in a function scope, meaning that variables declared in a function are available anywhere in that function, even before they are assigned a value.



              (3) Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable.




              you code is same as: (read comment)



              <script>
              var a = 1; //global a = 1
              function b() {
              a = 10;
              var a = 20; //local a = 20
              }
              b();
              alert(a); //global a = 1
              </script>


              reference:

              (1) JavaScript Variable Scope:

              (2) A Dangerous Example of Javascript Hoisting

              (3) Variable scope



              So in your code:



              var a = 1;          //global a = 1  
              function b() {
              a = 10;
              return;
              function a() {} //local
              }
              b();
              alert(a); //global a = 1





              share|improve this answer


























              • where you wrote "local a Undefined" - that's actually not true. function declarations are parsed before any content of the parent scope, so in this case when you assign a = 10, you are already overriding function a() {} with value 10. See Quentin's answer

                – rochal
                Mar 11 '13 at 21:54











              • @rochal No, please read this article Javascript hoisting can be especially nefarious in loops Also check code on safari browser...let me know And Yes its a=10 on most browser ..Actually Undefined behaviour not ERROR

                – Grijesh Chauhan
                Mar 12 '13 at 4:12











              • read point 4. from Quentin's answer. At this point a already exists - it's a function, not an Undefined. How would Safari be different to i.e. Chrome..?

                – rochal
                Mar 12 '13 at 9:08











              • @rochal variables declared in a function are available anywhere in that function, even before they are assigned a value I also checked it, and giving 10 But according to three tutorials (I given link) it should be undefined and 10 is result because of undefined. Quentin answered according to output but I think it may be not 10 for some browsers..

                – Grijesh Chauhan
                Mar 13 '13 at 4:15











              • once again, in your example code: a = 10; //local a Undefined is incorrect a = 10; //local a is function(){} is correct because as soon as you check the value of a inside function b() it already has been overridden by the local function a(){} so your comment that "local a Undefined" is not valid. And browser has nothing to do with it, it's a language feature.

                – rochal
                Mar 13 '13 at 4:39














              5












              5








              5








              (1) JavaScript does not have block statement scope; rather, it will be local to the code that the block resides within.



              (2) Javascript's declaration of variables in a function scope, meaning that variables declared in a function are available anywhere in that function, even before they are assigned a value.



              (3) Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable.




              you code is same as: (read comment)



              <script>
              var a = 1; //global a = 1
              function b() {
              a = 10;
              var a = 20; //local a = 20
              }
              b();
              alert(a); //global a = 1
              </script>


              reference:

              (1) JavaScript Variable Scope:

              (2) A Dangerous Example of Javascript Hoisting

              (3) Variable scope



              So in your code:



              var a = 1;          //global a = 1  
              function b() {
              a = 10;
              return;
              function a() {} //local
              }
              b();
              alert(a); //global a = 1





              share|improve this answer
















              (1) JavaScript does not have block statement scope; rather, it will be local to the code that the block resides within.



              (2) Javascript's declaration of variables in a function scope, meaning that variables declared in a function are available anywhere in that function, even before they are assigned a value.



              (3) Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable.




              you code is same as: (read comment)



              <script>
              var a = 1; //global a = 1
              function b() {
              a = 10;
              var a = 20; //local a = 20
              }
              b();
              alert(a); //global a = 1
              </script>


              reference:

              (1) JavaScript Variable Scope:

              (2) A Dangerous Example of Javascript Hoisting

              (3) Variable scope



              So in your code:



              var a = 1;          //global a = 1  
              function b() {
              a = 10;
              return;
              function a() {} //local
              }
              b();
              alert(a); //global a = 1






              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Mar 15 '13 at 15:21

























              answered Mar 9 '13 at 16:40









              Grijesh ChauhanGrijesh Chauhan

              45.8k1498163




              45.8k1498163













              • where you wrote "local a Undefined" - that's actually not true. function declarations are parsed before any content of the parent scope, so in this case when you assign a = 10, you are already overriding function a() {} with value 10. See Quentin's answer

                – rochal
                Mar 11 '13 at 21:54











              • @rochal No, please read this article Javascript hoisting can be especially nefarious in loops Also check code on safari browser...let me know And Yes its a=10 on most browser ..Actually Undefined behaviour not ERROR

                – Grijesh Chauhan
                Mar 12 '13 at 4:12











              • read point 4. from Quentin's answer. At this point a already exists - it's a function, not an Undefined. How would Safari be different to i.e. Chrome..?

                – rochal
                Mar 12 '13 at 9:08











              • @rochal variables declared in a function are available anywhere in that function, even before they are assigned a value I also checked it, and giving 10 But according to three tutorials (I given link) it should be undefined and 10 is result because of undefined. Quentin answered according to output but I think it may be not 10 for some browsers..

                – Grijesh Chauhan
                Mar 13 '13 at 4:15











              • once again, in your example code: a = 10; //local a Undefined is incorrect a = 10; //local a is function(){} is correct because as soon as you check the value of a inside function b() it already has been overridden by the local function a(){} so your comment that "local a Undefined" is not valid. And browser has nothing to do with it, it's a language feature.

                – rochal
                Mar 13 '13 at 4:39



















              • where you wrote "local a Undefined" - that's actually not true. function declarations are parsed before any content of the parent scope, so in this case when you assign a = 10, you are already overriding function a() {} with value 10. See Quentin's answer

                – rochal
                Mar 11 '13 at 21:54











              • @rochal No, please read this article Javascript hoisting can be especially nefarious in loops Also check code on safari browser...let me know And Yes its a=10 on most browser ..Actually Undefined behaviour not ERROR

                – Grijesh Chauhan
                Mar 12 '13 at 4:12











              • read point 4. from Quentin's answer. At this point a already exists - it's a function, not an Undefined. How would Safari be different to i.e. Chrome..?

                – rochal
                Mar 12 '13 at 9:08











              • @rochal variables declared in a function are available anywhere in that function, even before they are assigned a value I also checked it, and giving 10 But according to three tutorials (I given link) it should be undefined and 10 is result because of undefined. Quentin answered according to output but I think it may be not 10 for some browsers..

                – Grijesh Chauhan
                Mar 13 '13 at 4:15











              • once again, in your example code: a = 10; //local a Undefined is incorrect a = 10; //local a is function(){} is correct because as soon as you check the value of a inside function b() it already has been overridden by the local function a(){} so your comment that "local a Undefined" is not valid. And browser has nothing to do with it, it's a language feature.

                – rochal
                Mar 13 '13 at 4:39

















              where you wrote "local a Undefined" - that's actually not true. function declarations are parsed before any content of the parent scope, so in this case when you assign a = 10, you are already overriding function a() {} with value 10. See Quentin's answer

              – rochal
              Mar 11 '13 at 21:54





              where you wrote "local a Undefined" - that's actually not true. function declarations are parsed before any content of the parent scope, so in this case when you assign a = 10, you are already overriding function a() {} with value 10. See Quentin's answer

              – rochal
              Mar 11 '13 at 21:54













              @rochal No, please read this article Javascript hoisting can be especially nefarious in loops Also check code on safari browser...let me know And Yes its a=10 on most browser ..Actually Undefined behaviour not ERROR

              – Grijesh Chauhan
              Mar 12 '13 at 4:12





              @rochal No, please read this article Javascript hoisting can be especially nefarious in loops Also check code on safari browser...let me know And Yes its a=10 on most browser ..Actually Undefined behaviour not ERROR

              – Grijesh Chauhan
              Mar 12 '13 at 4:12













              read point 4. from Quentin's answer. At this point a already exists - it's a function, not an Undefined. How would Safari be different to i.e. Chrome..?

              – rochal
              Mar 12 '13 at 9:08





              read point 4. from Quentin's answer. At this point a already exists - it's a function, not an Undefined. How would Safari be different to i.e. Chrome..?

              – rochal
              Mar 12 '13 at 9:08













              @rochal variables declared in a function are available anywhere in that function, even before they are assigned a value I also checked it, and giving 10 But according to three tutorials (I given link) it should be undefined and 10 is result because of undefined. Quentin answered according to output but I think it may be not 10 for some browsers..

              – Grijesh Chauhan
              Mar 13 '13 at 4:15





              @rochal variables declared in a function are available anywhere in that function, even before they are assigned a value I also checked it, and giving 10 But according to three tutorials (I given link) it should be undefined and 10 is result because of undefined. Quentin answered according to output but I think it may be not 10 for some browsers..

              – Grijesh Chauhan
              Mar 13 '13 at 4:15













              once again, in your example code: a = 10; //local a Undefined is incorrect a = 10; //local a is function(){} is correct because as soon as you check the value of a inside function b() it already has been overridden by the local function a(){} so your comment that "local a Undefined" is not valid. And browser has nothing to do with it, it's a language feature.

              – rochal
              Mar 13 '13 at 4:39





              once again, in your example code: a = 10; //local a Undefined is incorrect a = 10; //local a is function(){} is correct because as soon as you check the value of a inside function b() it already has been overridden by the local function a(){} so your comment that "local a Undefined" is not valid. And browser has nothing to do with it, it's a language feature.

              – rochal
              Mar 13 '13 at 4:39











              2















              1. function declaration function a(){} is hoisted first, hence in local scope a is created.

              2. If you have two variable with same name (one in global another in local), local variable always get precedence over global variable.

              3. When you set a=10, you are setting the local variable a , not the global one.


              Hence, the value of global variable remain same and you get, alerted 1






              share|improve this answer






























                2















                1. function declaration function a(){} is hoisted first, hence in local scope a is created.

                2. If you have two variable with same name (one in global another in local), local variable always get precedence over global variable.

                3. When you set a=10, you are setting the local variable a , not the global one.


                Hence, the value of global variable remain same and you get, alerted 1






                share|improve this answer




























                  2












                  2








                  2








                  1. function declaration function a(){} is hoisted first, hence in local scope a is created.

                  2. If you have two variable with same name (one in global another in local), local variable always get precedence over global variable.

                  3. When you set a=10, you are setting the local variable a , not the global one.


                  Hence, the value of global variable remain same and you get, alerted 1






                  share|improve this answer
















                  1. function declaration function a(){} is hoisted first, hence in local scope a is created.

                  2. If you have two variable with same name (one in global another in local), local variable always get precedence over global variable.

                  3. When you set a=10, you are setting the local variable a , not the global one.


                  Hence, the value of global variable remain same and you get, alerted 1







                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited May 17 '14 at 13:43

























                  answered May 17 '14 at 13:30









                  KhanSharpKhanSharp

                  7,90343747




                  7,90343747























                      0














                      When I read the same article you did JavaScript Scoping and Hoisting, I was confused as well because the author never showed what the two opening example codes are interpreted as in the compiler.



                      Here is example you provided, and the second on the page:



                      var a = 1;
                      function b() {
                      function a() {} // declares 'a' as a function, which is always local
                      a = 10;
                      return;
                      }
                      b();
                      alert(a);


                      and here is the first example on the page:



                      var foo = 1;
                      function bar() {
                      var foo; // a new local 'foo' variable
                      if (!foo) {
                      foo = 10;
                      }
                      alert(foo);
                      }
                      bar();


                      Hope this helps






                      share|improve this answer
























                      • I believe that article explains the hoisting topic quite good 2n.pl/blog/javascript-part-4

                        – Adam Piotrowski
                        Apr 9 '18 at 10:18
















                      0














                      When I read the same article you did JavaScript Scoping and Hoisting, I was confused as well because the author never showed what the two opening example codes are interpreted as in the compiler.



                      Here is example you provided, and the second on the page:



                      var a = 1;
                      function b() {
                      function a() {} // declares 'a' as a function, which is always local
                      a = 10;
                      return;
                      }
                      b();
                      alert(a);


                      and here is the first example on the page:



                      var foo = 1;
                      function bar() {
                      var foo; // a new local 'foo' variable
                      if (!foo) {
                      foo = 10;
                      }
                      alert(foo);
                      }
                      bar();


                      Hope this helps






                      share|improve this answer
























                      • I believe that article explains the hoisting topic quite good 2n.pl/blog/javascript-part-4

                        – Adam Piotrowski
                        Apr 9 '18 at 10:18














                      0












                      0








                      0







                      When I read the same article you did JavaScript Scoping and Hoisting, I was confused as well because the author never showed what the two opening example codes are interpreted as in the compiler.



                      Here is example you provided, and the second on the page:



                      var a = 1;
                      function b() {
                      function a() {} // declares 'a' as a function, which is always local
                      a = 10;
                      return;
                      }
                      b();
                      alert(a);


                      and here is the first example on the page:



                      var foo = 1;
                      function bar() {
                      var foo; // a new local 'foo' variable
                      if (!foo) {
                      foo = 10;
                      }
                      alert(foo);
                      }
                      bar();


                      Hope this helps






                      share|improve this answer













                      When I read the same article you did JavaScript Scoping and Hoisting, I was confused as well because the author never showed what the two opening example codes are interpreted as in the compiler.



                      Here is example you provided, and the second on the page:



                      var a = 1;
                      function b() {
                      function a() {} // declares 'a' as a function, which is always local
                      a = 10;
                      return;
                      }
                      b();
                      alert(a);


                      and here is the first example on the page:



                      var foo = 1;
                      function bar() {
                      var foo; // a new local 'foo' variable
                      if (!foo) {
                      foo = 10;
                      }
                      alert(foo);
                      }
                      bar();


                      Hope this helps







                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Nov 6 '13 at 5:30









                      JonathanJonathan

                      416516




                      416516













                      • I believe that article explains the hoisting topic quite good 2n.pl/blog/javascript-part-4

                        – Adam Piotrowski
                        Apr 9 '18 at 10:18



















                      • I believe that article explains the hoisting topic quite good 2n.pl/blog/javascript-part-4

                        – Adam Piotrowski
                        Apr 9 '18 at 10:18

















                      I believe that article explains the hoisting topic quite good 2n.pl/blog/javascript-part-4

                      – Adam Piotrowski
                      Apr 9 '18 at 10:18





                      I believe that article explains the hoisting topic quite good 2n.pl/blog/javascript-part-4

                      – Adam Piotrowski
                      Apr 9 '18 at 10:18



                      Tb2pWIj2
                      aPD,9,AbZRNptH,eSDNs 322HAUa7q9eNtVUa55nfsBpEIa oiTqAHsLLiX1wwLi4YG3HbOJY0 9Tv2Ws0d7oFOneH3YtR

                      Popular posts from this blog

                      Monofisismo

                      Angular Downloading a file using contenturl with Basic Authentication

                      Olmecas