Clarification on nested function variable scope within javascript

Question

This seems to be a topic that has been asked several times before but i'm really struggling to find a succinct explanation. Closest I could find was this (What is the scope of variables in JavaScript?) but there are several aspects I still don't quite understand. As you have probably guessed I'm fairly new to javascript but this aspect seems crucial to understand fully if I am ever going to get anywhere with it.

So consider a program comprised of several nested functions:

function functionA() {
    var functionAVariable = "A";
}

function functionB() {
    var functionBVariable = "B";
}

function functionC() {
    var functionCVariable = "C";

    function functionD() {
        var functionDVariable = "D";
    }
}

var globalVariable = "G";
var mainFunction = function () {
var mainFunctionVariable = "M";
    functionA();        
    functionB();
    functionC();
};

From my understanding all functions will have access to globalVariable and functionA, functionB and functionC will have access to mainFunctionVariable.

Where I start to get a bit confused is when we add deeper nests to the overall program as with functionD. Will functionD have access to all higher level function variable that currently wrap it or will it only have access to the immediate parent, functionC?

[Variable scope in nested functions in Javascript](http://stackoverflow.com/questions/18067742/variable-scope-in-nested-functions-in-javascript) — ozil, Aug 07 '15 at 12:06

score 9 · Accepted Answer · answered Aug 07 '15 at 12:05

From my understanding all functions will have access to globalVariable

Correct

and functionA, functionB and functionC will have access to mainFunctionVariable.

No. Only the anonymous function assigned to mainFunction will have access to mainFunctionVariable. Scope is determined by where a function is created, not where it is called.

Where I start to get a bit confused is when we add deeper nests to the overall program as with functionD. Will functionD have access to all higher level function variable that currently wrap it or will it only have access to the immediate parent, functionC?

A function has access to all variables in its own scope and in wider scopes (unless they are masked by another variable of the same name).

var x = 1;

function a() {
  var y = 2;

  function b() {
    var z = 3;

    function c() {
      alert([x, y, z]);
    }
    c();
  }
  b();
}
a();

@Quentin Does this mean variables within function c would have the narrowest scope even though this function is called first? — Ash, Aug 07 '15 at 12:37
Yes. When and how a function is called is irrelevant to scope. — Quentin, Aug 07 '15 at 12:39

Urvesh Purohit · Answer 2 · 2015-08-07T12:49:36.060

Scope of the variable is only for function itself in which it is declared. If we need to access the variable of one function into another then we have to pass it as a parameter of the function in which we need to access otherwise we have to create global variable, global variable is accessible in all functions of script.

In example above

functionAVariable is accessible only in functionA, 
functionBVariable is accessible only in functionB and
functionCVariable is accessible only in functionC.

You can not access functionCVariable in functionD same as mainFunctionVariable is only accessible in mainFunction. mainFunctionVariable is not accessible in functionA, functionB, functionC.

Variable globalVariable is accessible in all the functions.

If you declare variable without specifying any datatype like var then it is by default treated as global variable. lets say we have functionA like

function functionA() {
    var functionAVariable = "A";
    globVariable = 10;
}

in above snippet, functionAVariable is only accessible in functionA but globVariable is now behave like global variable.

So say I wanted to widen the scope of 'functionDVariable' so this is accessible by functionA.. what would be the simplest way around this, outside of declaring functionDVariable as a global? — Ash, Aug 07 '15 at 12:41
you can pass the functionDVariable as parameter of the other function in which you would like to use its value. — Urvesh Purohit, Aug 07 '15 at 12:51

Clarification on nested function variable scope within javascript

2 Answers2