104

I am new to JavaScript and I was doing some practices on local and global variable scopes. Following is my code(fiddle):

var myname = "initial"
function c(){
    alert(myname);
    var myname = "changed";
    alert(myname);
}
c();

When the first alert is called, it is showing myname as undefined. So my confusion is why I am not able to access a global instance of myname and if I don't define myname within the function then it will work fine.

9
  • 2
    if you do alert(window.myname); then you will get values
    – Just code
    Nov 1, 2013 at 5:31
  • @dholakiyaankit I've tried using window.myname still it is saying undefined... Nov 1, 2013 at 5:37
  • @BharatSoni window.myname works in my browser. Nov 1, 2013 at 5:42
  • It should work bharat
    – Just code
    Nov 1, 2013 at 5:44
  • 2
    var myname = "initial" isn't a global variable. It can be accessed only from that current scope that javascript is. If you want to declare a global variable do it without the "var" keyword, and thar variable should be a property in the window object.
    – llouk
    May 22, 2016 at 19:30

2 Answers 2

62

In JavaScript, the variable declarations are automatically moved to the top of the function. So, the interpreter would make it look more like this:

var myname = "initial"
function c(){
    var myname;
    // Alerts undefined
    alert(myname);
    myname = "changed";
    // Alerts changed
    alert(myname);
}
c();

This is called hoisting.

Due to hoisting and the fact that the scope for any variable is the function it's declared in, it's standard practice to list all variables at the top of a function to avoid this confusion.

4
  • that I've understood, so there is now way to access a global variable with same name as local variable.. ?? Nov 1, 2013 at 5:34
  • 2
    You should be able to access it by doing window.myname. See here: stackoverflow.com/questions/15826751/… But global variables are not usually considered a good practice, and in most cases it'd be better to define a global object and access it through that. i.e. var me = { myname: "initial" } then call me.myname in the function. Nov 1, 2013 at 5:38
  • 1
    It is not correct to say that variables declaration are moved on top. For example if on line 10 it is written var myname = "initial", the result we see is not like var myname = "initial" on line 1, but actually we see the behavior as if var myname is on line 1 and on line 10 it is assigned value i.e. myname = "initial"
    – user2603796
    Sep 9, 2015 at 9:10
  • Also, note that using var myVariable outside a function does not automatically make it a global. Often declaring myVariable with nothing in front makes it a global (unless its already scoped/set earlier in the function), but its always better do use window. when doing so. Then again, just avoid globals in general where possible :P
    – redfox05
    Feb 22, 2019 at 23:02
9

It is not replacing the global variable. What is happening is called "variable hoisting". That is, var myname; gets inserted at the top of the function. Always initialize your variables before you use them.

Try this:

var myname = "initial";

function c() {
    alert(myname);
    myname = "changed";
    alert(myname);
}

c();

3
  • sir, I am not just trying to change the value.. what you are doing is changing the value of global variable itself.. I want to understand the concept "WHY" it is happening... Nov 1, 2013 at 5:32
  • This fixes the problem of alerting undefined, but it eliminates any local variables as it's only using the global variable myname. Nov 1, 2013 at 5:32
  • It is not replace the global variable. What is happening is called "variable hoisting". That is, myname var myname; gets inserted at the top of the function. Always initialize your variables before you use them you can refer this stackoverflow.com/questions/11938961/…
    – Sridhar R
    Nov 1, 2013 at 5:35

Not the answer you're looking for? Browse other questions tagged or ask your own question.