Javascript scope issue: variable not being identified

Question

I have two functions, one function calling the other.

Below is a simple analogy I created of the structure of code which I have:

function test1(){
    alert(a);//a is not identified here even when test1() is called under test2 which has a defined in scope
    alert(b);//b is identified here
}

function test2(){
    var a       =       'a';//Defining a
    test1();//Calling test1()
}
var b   =   'b';
test2();

As per the code above, function test1() is able to identify variable b but not variable a.

My question is that why variable a is not in the scope of test1 function even when we are calling test1() inside test2() which defines variable a?

Thanks in advance.

user123444555621 · Accepted Answer · 2011-09-03 07:39:39Z

3

Functions remember their scope chain at the time they're being created, not at the time they're called.

Note that b gets "hoisted", so your code actually does this:

var b; // push b on scope chain

function test1(){ // store scope chain [b]
    alert(a);
    alert(b);
}

function test2(){ // store scope chain [b]
    var a; // push a on scope chain
    a = 'a';
    test1(); //Calling test1() which still has scope chain [b], not [b,a]
}
b   =   'b';
test2();

answered Sep 3, 2011 at 7:39

user123444555621

154k27 gold badges118 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

netemp Over a year ago

"Functions remember their scope chain at the time they're being created, not at the time they're called." This seems to be the crux of the whole issue.

Jayantha Lal Sirisena · Accepted Answer · 2011-09-03 07:28:11Z

3

your expectation is wrong about the scope of the variables,

according to your code b is a global variable to 2 functions and a is in the scope of test2 function only because it is defined withing test2, If you want something like you expected you can define test1 function in test2 scope like this,

function test2(){
    var a       =       'a';
    test1();
  function test1(){
      alert(a);
      alert(b);
   }
}
var b   =   'b';
test2();

answered Sep 3, 2011 at 7:28

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

1 Comment

sethobrien Over a year ago

@NetEmp For more info about scoping, check out the wikipedia article. Javascript uses lexical scoping, because dynamic scoping is evil.

IanR · Accepted Answer · 2011-09-03 08:04:20Z

2

JavaScript has 'function scope' which means that anything defined in a function is not visible outside of the function. So variable 'a' is not visible outside of test2. However, variable 'b' is a global variable so it is visible in every scope.

Function scope also means that inner functions get access to things defined in the outer function but that doesn't come in to play here...test1 is called from within test2 but it's not an inner function of test2. To see this in action you'd need to define the body of the test1 function within test2...

function test2(){
    var a       =       'a';//Defining a
    test1();//Calling test1()

    function test1(){
        alert(a);//a is identified here because of function scope
        alert(b);//b is identified here because it's global
    }
}

edited Sep 3, 2011 at 8:04

answered Sep 3, 2011 at 7:38

IanR

4,8033 gold badges31 silver badges27 bronze badges

1 Comment

netemp Over a year ago

thanks IanR, so only an inner function can access values defined in parent one and not the called function.

Bakudan · Accepted Answer · 2011-09-03 08:36:21Z

It is a good practice to call the functions with arguments. This will make your code easily readable and maintainable. Just adding arguments to the functions make the code working:

function test1(a,b){
    alert(a);
    alert(b);
}

function test2(b){
    var a = 'a';
    test1(a,b);
}
var b = 'b';
test2(b);

If you don`t want to use arguments in the function declarations, a solutions is to use the arguments object inside the code:

function test1(){
    alert(arguments[0]);
    alert(arguments[1]);
}

function test2(){
    var a = 'a';
    test1(a,arguments[0]);
}
var b = 'b';
test2(b);

If you want you can make the arguments with default values. Since in JavaScript you can`t do it in the function argument list, it is done in the body of the function:

function test1(a,b){
    a = a || 'a';
    b = b || 'b';
    alert(a);
    alert(b);
}
function test2(b){
    var a = 'a';
    test1(a);//here b is not passed to the function and b will get the default value
}
var b = 'some new string for b';
test2(b);

Live on jsfiddle

AmGates · Accepted Answer · 2011-09-03 07:39:32Z

0

According to your functions you have declared and defined the variable "a" within the function "test2()" so the scope of the variable "a" is restricted within that function itself and accessing the variable will return "undefined". But it is not in the case of the variable "b" which is declared and defined globally, So it can be accessed any where in the script part.

hope this helps you.

answered Sep 3, 2011 at 7:39

AmGates

2,12316 silver badges29 bronze badges

Collectives™ on Stack Overflow

Javascript scope issue: variable not being identified

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related