A JavaScript language problem

Question

I got a JavaScript error when running codes below:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
    var fn = function () {
        //var aaa = 'AAA';
        return function () {
            alert(aaa);
        };
    }();

    var foo2 = function () {
        var aaa = 'BBB';
        (function () {
            alert(aaa); // 'BBB'
        })();
        fn(); // Error: Uncaught ReferenceError: aaa is not defined
    }();
</script>

I think when fn function running, it should be able to find aaa in foo2 function.

But I got error. Why?

Thank you!

Jakob · Accepted Answer · 2011-01-24 10:15:41Z

3

I think when fn function running, it should be able to find aaa in foo2 function.

No, it should not. aaa is declared in foo2 as a local variable, it is not accessible inside fn. What makes you think otherwise? No programming language I have seen would behave like that.

It will work if you uncomment the line //var aaa = 'AAA'; but then the alert inside fn will of course say "AAA" and not "BBB".

answered Jan 24, 2011 at 10:15

Jakob

24.5k9 gold badges48 silver badges58 bronze badges

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

Comments

PaoloVictor · Accepted Answer · 2011-01-24 10:23:17Z

It doesn't work because aaa is out of fn()'s scope. What may be confusing you is that

(function () {
  alert(aaa); // 'BBB'
})();

Is working but fn() isn't. What's happening is that since "BBB" is defined and invoked inside foo2, alert(aaa) and aaa are in the same scope, and it works just fine.

Given that, you have two options:

Declare aaa in a upper scope:

var aaa = 'BBB';

var fn = function () {
  return function () {
    alert(aaa);
  };
};

var foo2 = function () {
    (function () {
        alert(aaa); // 'BBB'
    })();
    fn();
};

Pass aaa as a parameter to fn():

var fn = function (aaa) {
  return function () {
    alert(aaa);
  };
};

var foo2 = function () {
    var aaa = 'BBB';
    (function () {
        alert(aaa); // 'BBB'
    })();
    fn(aaa);
};

Here's an article about javascript scoping:

http://www.digital-web.com/articles/scope_in_javascript/

I hope this helps.

deceze · Accepted Answer · 2011-01-24 10:17:17Z

1

You declared var aaa within foo2, so the scope of it is restricted to foo2. fn has no access to it.

Either declare var aaa outside of both functions, or pass it to fn as a parameter.

answered Jan 24, 2011 at 10:17

deceze♦

525k89 gold badges806 silver badges954 bronze badges

Collectives™ on Stack Overflow

A JavaScript language problem

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related