how does javascript reference a variable inside a callback?

Question

So if I have some javascript like:

Foo.init = function(options) {
  Bar.set_listener('some_event', function() {
    console.log(options);
  });
};

where I call Foo.init with some options like Foo.init({whatever: 'hi'}) and that Bar.set_listener method takes the callback and stores it, and then invokes it at some later time when 'some_event' is triggered....

will console.log print undefined or {whatever: 'hi'} ? The answer seems to be {whatever: 'hi'} but that confuses me. How does this callback when invoked have any idea how to reference the options variable passed in to Foo.init?

You need to read up on 'closures' in Javascript. The explanation is too long to be an answer here. — bmargulies
– bmargulies, Commented Mar 5, 2013 at 23:14
It does log {whatever: 'hi'}. How, that's an implementation detail. — John Dvorak
– John Dvorak, Commented Mar 5, 2013 at 23:16

JaredPar · Accepted Answer · 2013-03-05 23:17:29Z

2

The ability of an inner function to reference state defined in an outer function is known as closures. This is a feature present in the majority of languages that allow for lambdas, or function values.

How it's implemented is worthy of a post much longer than can really be said in a Stack Overflow answer. But in summary the Javascript runtime will persist the values defined in an outer function so long as there is an inner function alive that references them.

answered Mar 5, 2013 at 23:17

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

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

Collectives™ on Stack Overflow

how does javascript reference a variable inside a callback?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related