CODEWITHSUNDEEP
javascript
Ash
Ash

Reputation: 444

Clarification on nested function variable scope within javascript

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?

Upvotes: 5

Views: 3504

Answers (2)

Urvesh Purohit
Urvesh Purohit

Reputation: 18

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943209

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();

Upvotes: 10

Related Questions