0

Can anyone explain the differences in the results of the following Shouldn't they all equal 1? since the a1 = 1 remains unchanged in the global scope?

// Case 1: shows 1

    var a1 = 1;
    function b1() {
        a1 = 10; //defines a1 in the local scope
        return;
        function a1() {} //defines a1 in the local scope
    }
    b1(); 
    console.log(a1);

// Case 2: shows 10

    var a2 = 1;
    function b2() {
        a2 = 10; //a2 in the local scope
        return;
    }
    b2();
    console.log(a2); //a2 in the global scope should remain as 1 but its 10 here???

// Case 3: shows 10

    var a3 = 1;
    function b3() {
        a3 = 10;
        return;
        function testingblablabla() {} // the same for this. a3 =10 is within b3 and globally a3 is still 1. why does it give a 10?
    }
    b3();
    console.log(a3);
chu8
  • 105
  • 1
  • 1
  • 10
  • Read about hoisting. The local name `a1` shadows the global `a1`. – trincot Jun 06 '21 at 16:04
  • 1
    I made you a snippet. Please do that in the future – mplungjan Jun 06 '21 at 16:05
  • Case 1: `a1 = 10` - this assigns to the identifier `a1` that is declared inside `b1` - global `a1` is unaffected. Case 2: `a2 = 10;` - this assigns to the `a2` that is declared globally; there is only one identifier `a2` in this case as compared to the Case 1 which contains two `a1` identifiers. Please read: [MDN - Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) – Yousaf Jun 06 '21 at 16:08
  • The question is regarding case 2 and 3...how come they behave differently? even if you had many overriding a1 identifiers within function b(){} it should always be 1 since the its the global variable. I have read the other answer on this question but it seems to only explain case 1 which I understand. – chu8 Jun 06 '21 at 16:31
  • You need to understand how javascript looks for variables in a particular scope. In case 1, identifier `a1` is already declared in the local scope of the function `b1`, so any assignments to the identifier `a1` will affect the _local_ `a1` - global `a1` is unaffected. In case 2, `a2` is not defined in the local scope of `b2`, so javascript will look for `a2` in the outer scope, i.e. the global scope. As global scope contains a declaration for `a2`, the assignment inside `b2` affects the global `a2`. Case 3 is exactly like case 2. – Yousaf Jun 06 '21 at 16:35
  • a2 is defined in the local scope of b2 (it literally is in the function defined as b2...and irrespective of whether or not its in b2, as you noted, it will look for a2 in the global scope anyway...and a2 in the global scope is 1. Not 10. but the result is 10. Why? thanks for your help – chu8 Jun 06 '21 at 16:41
  • `a2 = 10;` - this is NOT a declaration; its an assignment statement. This `var a2 = 10;` is a declaration of `a2`. Try adding the `var` keyword before `a2` in `b2` and observe the output. – Yousaf Jun 06 '21 at 16:44
  • _"it will look for a2 in the global scope anyway"_ - no. `a2` will only be looked for in the global scope if its NOT declared in the current scope, i.e. local scope of `b2`. – Yousaf Jun 06 '21 at 16:46

0 Answers0