JavaScript local and global variable confusion

Question

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.

if you do **alert(window.myname);** then you will get values — Just code, Nov 01 '13 at 05:31
@dholakiyaankit I've tried using window.myname still it is saying undefined... — Bharat Soni, Nov 01 '13 at 05:37
http://jsfiddle.net/xjmBf/6/ in my browser this is also working — Just code, Nov 01 '13 at 06:13
It may not be working in the fiddle because the jsfiddle might have it's own scope, though I don't know enough about jsfiddle to say for certain. — EmptyArsenal, Nov 01 '13 at 06:26
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 '16 at 19:30
Every function gets its `this`, unlike fat arrow they dont have own `this`,but they can related reuse to closest context `this`, now, js look for variable from current context if not found go a step upward look in closest parent context if present in it or so on — Ashish Kamble, Jun 08 '20 at 05:06

score 61 · Accepted Answer · edited Dec 21 '20 at 18:13

61

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.

edited Dec 21 '20 at 18:13

Peter Mortensen

30,738
21
105
131

answered Nov 01 '13 at 05:31

EmptyArsenal

7,314
4
33
56

that I've understood, so there is now way to access a global variable with same name as local variable.. ?? – Bharat Soni Nov 01 '13 at 05:34
2

You should be able to access it by doing `window.myname`. See here: http://stackoverflow.com/questions/15826751/access-overridden-global-variable-inside-a-function 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. – EmptyArsenal Nov 01 '13 at 05: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" – Sep 09 '15 at 09: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 '19 at 23:02

score 9 · Answer 2 · edited Dec 21 '20 at 18:14

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();

edited Dec 21 '20 at 18:14

Peter Mortensen

30,738
21
105
131

answered Nov 01 '13 at 05:29

Sridhar R

20,190
6
38
35

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... – Bharat Soni Nov 01 '13 at 05:32
This fixes the problem of alerting undefined, but it eliminates any local variables as it's only using the global variable `myname`. – EmptyArsenal Nov 01 '13 at 05: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 http://stackoverflow.com/questions/11938961/understanding-global-local-scope-in-javascript?rq=1 – Sridhar R Nov 01 '13 at 05:35

JavaScript local and global variable confusion

2 Answers2

Linked

Related