Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Fixing Our Problem with Closures

Closures- console returning a function instead of executing code inside of inner function

function makeBirdCounter() {
  let count=0;
  return function (){
  count += 1;
  return count + ' birds';
  }
}

console.log(makeBirdCounter());

this returns

ƒ (){
  count += 1;
  return count + ' birds';
  }

but in the video it does the calculation returning

1 birds
2 birds 
3 birds

depending on how many times its ran..whats going on?

2 Answers

odzer
odzer
20,469 Points

"Why do we have to pass the function into a variable and then call it, why can't you just call the function directly?"

You can't call it directly because calling it only returns the inner function, it does not execute the inner function. So if you console.log(makeBirdCounter()); you see the inner function in the console, you do not see the output of the inner function. But you can run it directly by doing console.log(makeBirdCounter()());

However, in this case, it will always log 1 bird, as the count variable inside the outer function will be set to 0 each time the outer function is called.

Dave StSomeWhere
Dave StSomeWhere
19,822 Points

You're missing the part in the video where he assigns the anonymous function returned from makeBirdCounter() to a variable and then executes the returned function. Hopefully you understand the overall concept of closures a bit better...

You just need to add the new variable, something like:

function makeBirdCounter() {
    let count = 0;
    return function () {
        count += 1;
        return count + ' birds';
    }
}

//console.log(makeBirdCounter());

let functionVariable = makeBirdCounter();
console.log(functionVariable());
console.log(functionVariable());
console.log(functionVariable());
console.log(functionVariable());

// outputs
1 birds
2 birds
3 birds
4 birds

Why do you have to do that?

Dave StSomeWhere
Dave StSomeWhere
19,822 Points

I'm not sure what you are asking. Could you elaborate on your question a little bit?

Why do we have to pass the function into a variable and then call it, why can't you just call the function directly?

Dave StSomeWhere
Dave StSomeWhere
19,822 Points

I think the real answer is that these function features is a useful way for the instructor to demonstrate the closure concept.

So, being able to assign the returned function to a variable, you can see (as the main purpose of the video) that each variable assigned this anonymous function has it own scope, containing the count variable. An this is what is referred to as a closure.

If that doesn't make sense, it is probably worth it to watch the video again, without getting hung up on the function stuff.

Functions have many great features. Yes, you can call functions directly, you can store functions in objects, along with many other spiffy features... Hopefully that helps a bit.