Var & JavaScript Variable Scope

Question

JS Code

    var foo = "Hello World!"; // <------- global scope
    document.write("<p>Before our anonymous function foo means '" + foo + '".</p>');

    (function() {
        // The following code will be enclosed within an anonymous function
        var foo = "Goodbye World!"; // <------- local scope
        document.write("<p>Inside our anonymous function foo means '" + foo + '".</p>');
    })(); // We call our anonymous function immediately

    document.write("<p>After our anonymous function foo means '" + foo + '".</p>');

HTML Output

Before our anomymous function foo means 'Hello World!".

Inside our anomymous function foo means 'Goodbye World!".

After our anomymous function foo means 'Hello World!".

My problem is

When we replace the value of foo variable inside the function why does not get it replaced ? How does it still contains the "Hello World!"?
If I'm to access the global variable inside the function How can I do it ?

Isn't it the same in all coding languages? scoping and inner scope isn't quite js unique behavior though it has it's "uniqueness". — gdoron
– gdoron, Commented Feb 7, 2013 at 17:32

Community · Accepted Answer · 2017-05-23 10:27:02Z

3

By using var foo inside your function, you are explicitly telling the variable only to change locally, within that function. If you want to change it globally, just use foo = ...

If you want to read up on it, I suggest this SO Question

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Feb 7, 2013 at 17:30

Andy

14.6k3 gold badges55 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Teddy · Accepted Answer · 2013-02-07 17:30:32Z

1

remove the var statement from the anonymous function and you will alter the global variable:

var foo = "Hello World!"; // <------- global scope
document.write("<p>Before our anonymous function foo means '" + foo + '".</p>');

(function() {
    // The following code will be enclosed within an anonymous function
    foo = "Goodbye World!"; // <------- local scope
    document.write("<p>Inside our anonymous function foo means '" + foo + '".</p>');
})(); // We call our anonymous function immediately

document.write("<p>After our anonymous function foo means '" + foo + '".</p>');

answered Feb 7, 2013 at 17:30

Teddy

18.6k4 gold badges33 silver badges43 bronze badges

Comments

score 0 · Accepted Answer · 2013-02-07 17:54:05Z

0

You are shadowing the global variable with a function scoped variable. To access the global variable you can explicitly say so with window.foo

var foo = "Hello World!"; // <------- global scope
document.write("<p>Before our anonymous function foo means '" + foo + '".</p>');

(function() {
    // The following code will be enclosed within an anonymous function
    var foo = "Goodbye World!"; // <------- local scope
    document.write("<p>Inside our anonymous function foo means '" + foo + '".</p>');
    document.write("<p>Inside our anonymous function window.foo means '" + window.foo + '".</p>');
    window.foo = window.foo + foo;
})(); // We call our anonymous function immediately

document.write("<p>After our anonymous function foo means '" + foo + '".</p>');

this will print "Hello World!Goodbye World!"

edited Feb 7, 2013 at 17:54

answered Feb 7, 2013 at 17:38

user2033671

2 Comments

Techie Over a year ago

O/P is Inside our anonymous function window.foo means 'undefined".

user2033671 Over a year ago

The global decleration of var = "Hello World!" adds it to the window object making it accesable from within the anonymous function. Here is a post about window scoping stackoverflow.com/a/4862268/2033671

Collectives™ on Stack Overflow

Var & JavaScript Variable Scope

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related