1

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 ?
Techie
  • 44,706
  • 42
  • 157
  • 243
  • 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 Feb 07 '13 at 17:32

3 Answers3

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

Community
  • 1
  • 1
Andy
  • 14,427
  • 3
  • 52
  • 76
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>');
Teddy
  • 18,357
  • 2
  • 30
  • 42
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!"

  • O/P is Inside our anonymous function window.foo means 'undefined". – Techie Feb 07 '13 at 17:39
  • 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 http://stackoverflow.com/a/4862268/2033671 –  Feb 07 '13 at 17:53