How to access outer function variable in nested inner function in JS

Question

I am new to JS and having a doubt with the below example. Please see the inline comments.

 function outer() { var x = 5; console.log("outer",x); // Prints 5 console.log("-----------"); function inner() { var x = 6; console.log("inner",x); // Prints 6 console.log("outer",x); // Prints 6. How to print 5 console.log("-----------"); function _inner() { var x = 7; console.log("_inner",x); // Prints 7 console.log("inner",x); // Prints 7. How to print 6 console.log("outer",x); // Prints 7. How to print 5 console.log("-----------"); } _inner(); } inner(); } outer(); 

Answer 1

May be this helps you. Assign your variables to your nested functions because therefore it is clear what varible should be used but they have to differ from each other in some way(name or via namespace):

function outer() {
    var x = 5;
    // or via namespace
    // var out = { x : 5 };
    console.log("outer",x); // 5
    console.log("-----------");
    function inner() {
        inner.x = 6;
        console.log("inner",inner.x); // 6
        console.log("outer",x); // 5
        console.log("-----------");
        function _inner() {
            _inner.x = 7;
            console.log("_inner",_inner.x); // 7
            console.log("inner",inner.x); // 6
            console.log("outer",x); // 5
            // namespace 
            // console.log("outer",out.x); // 5
            console.log("-----------");
        }
        _inner();
    }
    inner();
}
outer();

In this example only two of three varibles are assign(not outer x) to functions because otherwise you could assess outer.x from outside outer function and assign it any value:

function outer(){
   outer.x = 5;
   ...
}
// assign any value outside outer function
outer.x = 34;

But when a local variable is defined:

function outer(){
   var x = 23;
}

Then there is no chance to assign this local variable(x) any value from outside outer function.

Answer 2

Javascript doesn't by default have blocked scope variable like many programming languages. This means that the variable x like you declared above, is the same variable.

Variable declarations, wherever they occur, are processed before any code is executed. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

I would suggest to not use the same variable name in a nested function. It becomes hard to read and debug. Also do you really need to have nested function ?

function outer() {
    var x = 5;
    console.log("outer",x); // Prints 5
    console.log("-----------");
    inner(x);
}
function inner(x1) {
    var x = 6;
    console.log("inner",x); // Prints 6
    console.log("outer",x1); // Prints 5
    console.log("-----------");
    _inner(x,x1);
}
function _inner(x1, x2) {
    var x = 7;
    console.log("_inner",x); // Prints 7
    console.log("inner",x1); // Prints 6. 
    console.log("outer",x2); // Prints 5.
    console.log("-----------");
}
outer();

Or you could use object declaring it like so

function outer() {
    var x = {
      outer: 5
    };
    console.log("outer",x,outer); // Prints 5
    console.log("-----------");
    function inner() {
        x.inner = 6;
        console.log("inner",x.outer); // Prints 6
        console.log("outer",x.inner); // Prints 6. How to print 5
        console.log("-----------");
        function _inner() {
            x._inner = 7;
            console.log("_inner",x._inner); // Prints 7
            console.log("inner",x.inner); // Prints 7. How to print 6
            console.log("outer",x.outer); // Prints 7. How to print 5
            console.log("-----------");
        }
        _inner();
    }
    inner();
}
outer();

Answer 3

when we reuse the variable name inside an method then only block-scope will work. means scope will be work. Means for these variables, the braces {. . .} will define the scope.

what you can try is define Global Variables

  
 
  
  
 
   
 
    
var x = 5;
    var innerx = 5;
    var _innerx = 5;
    function outer() {
    }