Determine the set of variables accessible within a JavaScript closure

Question

"[JavaScript functions] internally store any variables they may refer to that are defined in their enclosing scopes."

How can I determine what that set of variables is?

For example, David Herman in Effective JavaScript gives this function (and closure):

function sandwichMaker() {

    var magicIngredient = "peanut butter";

    function make(filling) {
        return magicIngredient + " and " + filling;
    }

    return make;
}

var f = sandwichMaker();

document.writeln("<p>" + f("jelly") + "</p>");
document.writeln("<p>" + f("bananas") + "</p>");
document.writeln("<p>" + f("marshmallows") + "</p>");

Sure, magicIngredient is a variable accessible to make(), but what else is? What if sandwichMaker were itself within a function? And then there are the globals. What is the function looking at when it looks for relevant values within the current scope?

i gotta say it is confusing how the filling var gets set to jelly and bananas and marshmallows since it doesn't look like sandwichMaker() takes a parameter — nathan hayfield
– nathan hayfield, Commented Jan 16, 2013 at 18:55

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

What if sandwichMaker were itself within a function? And then there are the globals.

Yes, all the variables from parent functions are accessible (if they are not shadowed). And the highest-scoped function inherits from the global scope then.

What is the function looking at when it looks for relevant values within the current scope?

You can inspect that with a debugger. Insert a debugger; statement in make, and then execute it and have a look into your devtools. You will see something like this:

Scope Chain
    0. make (currently executed):
        this: (+)Window
        arguments: (+)Arguments
        filling "jelly"
    1. sandwichMaker:
        arguments: (+)Arguments
        magicIngredient: "peanut butter"
        make: (+)Function
    Global
        AnonXMLHttpRequest: …
        ApplicationCache: …
        Array: …
        …

Also have a look at this great article: http://dmitrysoshnikov.com/ecmascript/es5-chapter-3-2-lexical-environments-ecmascript-implementation/

Example view at Chrome Devtools:

_{(from www.briangrinstead.com)}:

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 16, 2013 at 19:07

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

2 Comments

Michael Broschat Over a year ago

Thank you, this seems the only possible answer. I was hoping for something as simple as: for(prop in obj) log whatever, but I'll learn this more complex technique. And the linked article looks good, too.

Bergi Over a year ago

No, you cannot determine that during runtime - the variable environment is not accessible from the program.

jbabey · Accepted Answer · 2013-01-16 19:19:53Z

JavaScript uses function scope. This is pretty simple to understand - anything declared in a function has scope to that function as well as any higher scopes.

A closure can be thought of as two things being combined together: a particular scope, and a particular point in time (when the function was created).

Sure, magicIngredient is a variable accessible to make(), but what else is?

Anything that was accessible to the scope of make at the time it was created. This includes all variables in the make function as well as any higher scopes. The scope of make is said to be closed-over the scope that existed at the point in time it was created, always giving it access to magicIngredient.

What if sandwichMaker were itself within a function?

Then make would have access to that scope (as it existed at the time make was created) as well.

And then there are the globals. What is the function looking at when it looks for relevant values within the current scope?

The interpreter will search the currently executing scope for any referenced variables. If it can't find them, it will look in the next higher scope. It will continue looking higher and higher until it finds the variable or runs out of scopes (the global scope is the highest, aka the window object for javascript running in a browser).

A related concept is shadowing - two variables can have the same name in parent/child scopes, the child is said to "shadow" the parent because it will take precedence. Note this is a bad practice.

The easiest way to understand how closures and scoping works is to understand a simple factory pattern, such as this one. When the inner function is created and returned, it is bound to that scope at that point in time and will continue to alert the proper values even after the values no longer exist.

Hope this helped - lots of questions stuffed into one question :)

Thank you. I'm still working on understanding the implications of closure and your response helps. But my real question was a practical one: here I am within a function--what do I have to work with? and the response by Bergi helps to answer that.

Brad · Accepted Answer · 2013-01-16 18:57:46Z

0

Suppose above function sandwichMaker() there was a variable defined...

var something = 'something';
function sandwichMaker () {
...

You can access something from within sandwichMaker() AND from within make().

The outer variables are accessible from within the functions. If you were to set var something = 'something else' within make(), then you would be effectively hiding the outer var something while within the make() function itself. However, you can just set something = 'something else', and the value will have changed at all scopes. It only hides the value if you declare that variable again.

answered Jan 16, 2013 at 18:57

Brad

164k57 gold badges380 silver badges559 bronze badges

Collectives™ on Stack Overflow

Determine the set of variables accessible within a JavaScript closure

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related