Are variables statically or dynamically “scoped” in javascript?

Question

Or more specific to what I need:

If I call a function from within another function, is it going to pull the variable from within the calling function, or from the level above? Ex:

myVar=0;

function runMe(){
    myVar = 10;
    callMe();
}

function callMe(){
   addMe = myVar+10;
}

What does myVar end up being if callMe() is called through runMe()?

Answer 1

Jeff is right. Note that this is not actually a good test of static scoping (which JS does have). A better one would be:

myVar=0;

function runMe(){
    var myVar = 10;
    callMe();
}

function callMe(){
   addMe = myVar+10;
}

runMe();
alert(addMe);
alert(myVar);

In a statically scoped language (like JS), that alerts 10, and 0. The var myVar (local variable) in runMe shadows the global myVar in that function. However, it has no effect in callMe, so callMe uses the global myVar which is still at 0.

In a dynamically scoped language (unlike JS), callMe would inherit scope from runMe, so addMe would become 20. Note that myVar would still be 0 at the alert, because the alert does not inherit scope from either function.

Answer 2

if your next line is callMe();, then addMe will be 10, and myVar will be 0.

if your next line is runMe();, then addMe will be 20, and myVar will be 10.

Forgive me for asking - what does this have to do with static/dynamic binding? Isn't myVar simply a global variable, and won't the procedural code (unwrap everything onto the call stack) determine the values?

Answer 3

Variables are statically scoped in JavaScript (dynamic scoping is really a pretty messy business: you can read more about it on Wikipedia).

In your case though, you're using a global variable, so all functions will access that same variable. Matthew Flaschen's reply shows how you can change it so the second myVar is actually a different variable.

This Page explains how to declare global vs. local variables in JavaScript, in case you're not too familiar with it. It's different from the way most scripting languages do it. (In summary: the "var" keyword makes a variable local if declared inside a function, otherwise the variable is global.)

Answer 4

Unless you use the keyword var to define your variables, everything ends up being a property on the window object. So your code would be equivalent to the following:

window.myVar=0;

function runMe(){
    window.myVar = 10;
    window.callMe();
}

function callMe(){
   window.addMe = window.myVar+10;
}

If you keep this in mind, it should always be clear what is happening.

Answer 5

As far as I understand, any variable without the var keyword is treated global, with it, its local scoped, so:

// This is a local scoped variable.
var local_var = "something"; 

// This is a global scoped variable.
global_var = "something_else";

As a good JS practice, it is recommended to ALWAYS add the var keyword.

Answer 6

I would like to add that lambda expressions are also statically scoped at the location that the expression is defined. For example,

var myVar = 0;

function foo() {
    var myVar = 10;
    return { bar: function() { addMe = myVar + 10; }}
}

var myObj = foo();

var addMe = 6;
alert(addMe);

myVar = 42;
myObj.bar();

alert(addMe);

This will display 6 and 20.

Answer 7

myVar=0;

function runMe(){
    myVar = 10;
    callMe();
}

function callMe(){
   addMe = myVar+10;
}

As far as the output is concerned myVar and addMe both will be global variable in this case , as in javascript if you don't declare a variable with var then it implicitly declares it as global hence when you call runMe() then myVar will have the value 10 and addMe will have 20 .