Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Fixing Our Problem with Closures

brandonlind2
brandonlind2
7,823 Points
Posted by brandonlind2
brandonlind2
7,823 Points

Outer closure function doesn't reset but inner one does?

I understand that the inner function will reset but that the outer function doesn't, Im a bit confused as to why this is, what makes the outer function different? Why would the inner reset the count varible but the outer one wouldn't, what if you had more a complex nesting of functions with like 3 inner functions? In that case the 2 function would be a outer function and an inner function towards different functions so would it's varibles reset?

1 Answer

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

The difference is variable scope.

As I explained in your previous question, the problem arises when the variable has global scope.

But when each event handler has its own scope, everything is fine. If there were more levels of nesting, only the innermost level (assuming that's where the event handler is established) needs its own scope.

Gregory Ledger
Gregory Ledger
6,116 Points
Gregory Ledger
Gregory Ledger
6,116 Points

I'm also a little confused. So the inner function count variable is different variable than the outer's count variable (except, I guess for the first time the function is used. Seems like I'm calling the inner function using the outer functions variables, but then ignoring the outer function's variables when I call the inner function more than once.

Matthew Foster
Matthew Foster
2,320 Points
Matthew Foster
Matthew Foster
2,320 Points

I agree with Gregory. I don't understand why the count variable is only reset to 0 on the first call of the function. Surely it would zero each time the function was call (returning 1 each time)?

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

The way I see it the outer count is assigned the value of zero each time it's called, but since the inner function (after the first time) already has a count which was assigned by the outer function the first time, it does not need to go out of its own (inner) scope to get any value for count, right?

If it doesn't quite sink in like that, try this in your console, this is one way to test it on your own:

function countPets(pet) {
    let count = 0
    console.log(count)
    function petCount(){
        console.log(pet)
        count += 1
        const string = `${count} ${pet}`
        return string
    }
    return petCount
}
const birds = countPets('birds')
const dogs = countPets('dogs')

Now run birds() a couple of times, and if you want also dogs() a few times. It will be logging you the pet you chose, and then at least if you use Chrome's console, it will show you the return I guess, which is the 1 birds, 2 birds, 1 dogs, and so on.

Now after your count is already on 3 or 4 or whatever for your pets, try calling a couple of times the countPets() function with whatever argument you choose, or with no arguments at all, you decide.

It will log you the value of (the outer) count which in turn will be 0 every time, because is being assigned 0 every time you call that outer function. However, once again, like it was mentioned in the best answer, we have to avoid mixing the scopes. If you try and call birds() or dogs() again after that, the value of the inner count will be untouched by your calls to the outer function. Hope that helped.