"When closures capture their context" and "scope gotchas in Javascript"

I had this idea that, as soon as you made a closure, all the variables were neatly packaged up and were immutable outside of the closure itself. Then I saw some weird behaviour in Javascript, and investigated further.

Turns out that my assumption was just plain wrong. For instance:


    test.pl:
    ----------------------------------------------
    sub say_hello {
        my $name = shift;

        my $text = 'Hello '.$name;
        my $sayAlert = sub { print "$text\n" };

        $text = "Not in Perl you don't";
        
        $sayAlert->();
    }

    say_hello('Bob');
    ----------------------------------------------

    > perl test.pl
    Not in Perl you don't
[download]

Now, reading that again, it makes sense that I would still have access to the variable in the closure from the same scope in which it was declared. So understandably, this version will work as I originally expected:



    test.pl:
    ----------------------------------------------
    sub say_hello {
        my $name = shift;
        my $sayAlert;
        {
            my $text = 'Hello '.$name;
            $sayAlert = sub { print "$text\n" };
        }    
        my $text = "Not in Perl you don't";
        
        $sayAlert->();
    }
    say_hello('Bob');
    ----------------------------------------------

    > perl test.pl
    Hello Bob
[download]

However, try the same thing in Javascript, and it doesn't work:


    function sayHello(name) {
      var sayAlert;
      {
          var text = 'Hello ' + name;
          sayAlert = function() { alert(text); }
      }
      var text='How confused am I?';
      sayAlert();
    }

    sayHello('Bob');

    ---> "How confused am I?"
[download]

It turns out that, unlike Perl, creating a new (nested) block in JS does NOT create a new scope. Instead a new scope is created when a function is declared. Oh, and it doesn't give you any "variable text redefined" warnings either.

Comment on "When closures capture their context" and "scope gotchas in Javascript" Select or Download Code

Replies are listed 'Best First'.

Re: "When closures capture their context" and "scope gotchas in Javascript"
by moritz (Cardinal) on Feb 08, 2008 at 16:25 UTC

// untested!
function sayHello(name){
  var sayAlert;
  var newScope = function() {
     var text = 'Hello' + name;
     sayAlert = function() { alert(text) }
  }
  newScope();
  var text = 'How confused am I?';
  sayAlert();
}
[download]

And that's why you want to program in perl, not in javascript (wherever possible).

[reply]
[d/l]

Re^2: "When closures capture their context" and "scope gotchas in Javascript"

by clinton (Priest) on Feb 08, 2008 at 16:36 UTC

moritz


   function sayHello(name) {
      var sayAlert;
      var text = 'Hello ' + name;
      sayAlert = function() { alert(text); }

      var new_text='How confused am I?';
      sayAlert();
    }

    sayHello('Bob');
[download]

Not a terribly meaningful example because I don't actually USE new_text, but...

Perl++ for DWIM!

[reply]
[d/l]

Re^2: "When closures capture their context" and "scope gotchas in Javascript"

by Jenda (Abbot) on Feb 08, 2008 at 23:25 UTC

You actually do not need to give the function a name:

(function(){alert('Gotcha')})();
[download]

function sayHello(name){
  var sayAlert;
  (function() {
     var text = 'Hello' + name;
     sayAlert = function() { alert(text) }
  })();
  var text = 'How confused am I?';
  sayAlert();
}
[download]

Jenda
Support Denmark!
Defend the free world!

[reply]
[d/l]
[select]

Re: "When closures capture their context" and "scope gotchas in Javascript"
by kyle (Abbot) on Feb 08, 2008 at 16:43 UTC

This kind of scoping is why I swore off PHP too. I wrote quite a bit of code thinking I'd figure out how scoping rules worked later (I figured there must be a my I hadn't found out about yet). It turned out, though, that there were only three scopes: global, file, and function. I was horrified. It's been over a year, and I still cringe a little inside as I think about it.

[reply]

Re^2: "When closures capture their context" and "scope gotchas in Javascript"

by moritz (Cardinal) on Feb 08, 2008 at 16:57 UTC

That, and the fact that I couldn't find a use strict; equivalent made me jump back to perl immediately.

[reply]
[d/l]

Re^3: "When closures capture their context" and "scope gotchas in Javascript"

by dragonchild (Archbishop) on Feb 09, 2008 at 02:12 UTC

tye

American

My criteria for good software:

Does it work?
Can someone else come in, make a change, and be reasonably certain no bugs were introduced?

[reply]

Re^4: "When closures capture their context" and "scope gotchas in Javascript"

by Joost (Canon) on Feb 09, 2008 at 15:29 UTC

Re^5: "When closures capture their context" and "scope gotchas in Javascript"

by dragonchild (Archbishop) on Feb 10, 2008 at 06:24 UTC

Re^5: "When closures capture their context" and "scope gotchas in Javascript"

by Porculus (Hermit) on Feb 10, 2008 at 14:31 UTC

Re^3: "When closures capture their context" and "scope gotchas in Javascript"

by Errto (Vicar) on Feb 08, 2008 at 18:49 UTC

I intended to learn Lua, until I found out that variables are global by default, and you have to add a keyword to limit their scope to the current sub/method.

strict

[reply]
[d/l]


laziness, impatience, and hubris
	PerlMonks