trouble understanding javascript function level scope

Question

I have trouble understanding JavaScript function level scope, as a C# programmer it looks wired to me, I will try to explain it through code:

CODE#1

//Problem
//if same named variable (as in global scope) is used inside function scope,
//then variable defined inside function will be used,global one will be shadowed
var a = 123;
function func() {
    alert(a); //returns undefined,why not just return 123 ?
    //how come js knew that there is variable 'a' will be defined and used in 
    //this function scope ,js is interpreter based ?
    var a = 1; //a is defined inside function
    alert(a); //returns 1 
}
func();

CODE#2

//when a variable(inside function) not named as same as the global,
//then it can be used inside function,and global variable is not shadowed
var k = 123;
function func2() {
    alert(k); //returns 123 ,why not 'undefined'
    var c = 1;
    alert(c); //returns 1
}
func2();

So my questions are

in CODE#1 why first time a is undefined,why not it's just return 123? And how come js knew that there is variable 'a' will be defined and used in this function scope, js is interpreter based?
in CODE#2 why not k is 'undefined'?

http://jsfiddle.net/Nu2Vu/

This is called hoisting in js adequatelygood.com/JavaScript-Scoping-and-Hoisting.html — fedosov
– fedosov, Commented Apr 14, 2013 at 18:01
btw hoising is not the same as function level scope. try for example (in firefox) the same, with let instead of var.it does the same thing, and let has block level scope — user2264587
– user2264587, Commented Apr 14, 2013 at 18:10

Useless Code · Accepted Answer · 2017-01-12 09:00:00Z

CODE #1

Hoisting causes all variable declarations to be brought to the top of the scope, but it leaves the assignment where it is. When there is a reference to a variable JavaScript will first look in the current scope, if it doesn't find the variable it will continue to look up the scope chain until if finds the variable. This code is interpreted something like this:

var a = 123; // global var named a declared, assigned a value
function func() {
  var a; // the declaration of the local var a gets
         // hoisted to the top of the scope, but the
         // assignment is left below, so at the point
         // it is initialized with a value of `undefined`
    alert(a); // looks for a local var named a, finds it but
              // it currently has a value of `undefined`

    a = 1; // now the value is assigned to the local a
    alert(a); // returns 1 
}
func();

CODE #2

This code behaves the way it does because of closure. A basic definition of closure is that JavaScript functions have access not only to variables defined in their own scope, they can also access variables available to their parent scope.

var k = 123; // declares and assigns a value to global k
function func2() {
    alert(k); // looks for a local var named k, doesn't find it,
              // looks in its parent scope (the global scope in
              // this case) finds k, returns its value of 123
    var c = 1;
    alert(c); //returns 1
}
func2();

Tomer Arazy · Accepted Answer · 2013-04-14 17:59:33Z

5

The first code is equal to this:

var a = 123;
function func() {
    var a; //Undefined!
    alert(a); 
    a = 1; 
    alert(a); 
}

This explains it pretty well: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/var

answered Apr 14, 2013 at 17:59

Tomer Arazy

1,82311 silver badges15 bronze badges

2 Comments

Ben Over a year ago

Just wanted to add that this is called "Variable Hoisting".

DayTimeCoder Over a year ago

@Ben thanks for introducing me to the term ,I didn't knew this :)

Collectives™ on Stack Overflow

trouble understanding javascript function level scope

2 Answers 2

CODE #1

CODE #2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

CODE #1

CODE #2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related