CODEWITHSUNDEEP
javascript
lshettyl
lshettyl

Reputation: 8181

Javascript basics: variable scope

I am learning javascript and can someone please explain the following code snippet for me?


var state=true;
function bob(){ var state=false; }
bob()

What should be the state value and why?

Many thanks, L

Upvotes: 3

Views: 343

Answers (6)

SAMAR
SAMAR

Reputation: 59

When we declare state = true. It is the global scope. inside function it we are changing value of state. so we are changing value of global scope. So after the change, global value will always be false.

Upvotes: 0

jAndy
jAndy

Reputation: 236022

Pretty important fact about ECMA-/Javascript is, there is only function scope.

This is one of the very first thing I teach anybody whos learning it. Another concept of Javascript is the scope chain. That is in very short words, an internal property which is saved in a context. Each function creates an (execution)-Context and stores all parent context in it's internal [[Scope]] property. Now, when you access a variable name within a function, the Javascript interpreter trys to resolved that variable. The search starts in it's own Activation object ( another thing, I'll skip the explanation here) and if it's found the search stops. If the variable could not get found there, Javascript accesses its [[Scope]] property and searches the Activation objects from all parent scopes lexically (lexical scope...).

The first match for that variable is then taken. If the variablename could not get found anywhere in the scopechain, undefined is returned.

Now in your snippet, we are creating the variable state two times. The first time, the Global Context stores the variable in it's Variable object (the same thing as an Activation object, but for non-Function context).

The second time, we create state in the execution context of bob() and Javascript stores it in it's Activation object. So, when we access state within the context of Bob, its always false, because our resolution lookup process begins in our own Activation object.

If we access state outside of Bob we just will find the variable state in the Variable object from the Global context (which actually is the Global object itself) and it's true there.

Further and more precise information about the whole topic:
http://dmitrysoshnikov.com/ecmascript/javascript-the-core/

Upvotes: 1

Andy E
Andy E

Reputation: 344575

At the end of execution, state will be true, because the function bob() defines a local variable named state instead of assigning to the global variable of the same name. However, in the following example, state would be false:

var state=true;
function bob(){ state=false; }
bob();

By omitting the var keyword, the JavaScript engine will travel up the scope chain looking for a variable named state, until it finds one or reaches the global scope. This can be further demonstrated with nested functions:

var state = true; // global
function bob() {
    var state = true; // local to `bob()` 
    function jim() {
        state = false;
    }
    jim();
    alert(state); //-> false, `jim()` modifies `bob()`'s variable
}
bob();
alert(state); //-> true, `jim()` and `bob()` don't touch the global variable

Upvotes: 3

chrisfrancis27
chrisfrancis27

Reputation: 4536

If you changed it to the following:

var state=true;
function bob(){ state=false; }
bob();

Then at the end of execution, state will be false. This is because the execution context inside bob() will look for a local variable named state, which it won't find (no var before state to declare new local variable) and if it doesn't find one it will move up to the next lexical context, where it will see your global variable scope, which it modifies to false.

Upvotes: 0

metaforce
metaforce

Reputation: 1377

If you want to change the gloabl "state" value to false, do the following (without (re)declaring a local variable for the bob() function):

var state=true;
function bob(){ state=false; }
bob()

state Will be:

false

Upvotes: 0

stecb
stecb

Reputation: 14746

var state=true; //global scope variable called 'state' => true
function bob(){ 

  var state=false; //local scope variable called 'state' => false, no global 'state' overwritten
  //state = false; would overwrite global 'state'

}
bob(); //call function

//global 'state' remains true

Upvotes: 0

Related Questions