JavaScript closure using function declaration

Question

I saw closure being declared using function expression and not function declaration. Being new to java script i have below queries. i tried referring similar question but it didn't helped me.

1. Do closure always need to be declared using function expression and not function definition
2. Do closure need to be self invoked in function expression
3. I understand key difference between Function declaration and function expression id hoisting. can anyone help me when and which in situation i should decide whether i should go with function declaration or function expression. what are the other advantages and disadvantages of using any one of them

Sorry some questions might be answered previously or kind of basic but being new to it i feel its confusing

below is the example i have done using function declaration but its not giving me proper result

function counter() {
var count = 0;
 return function() { return count++; }
}

<!-- using function declaration -->

<button onclick="alert(counter())">Counter</button>

var counter = (function() {
  var count = 0;
 return function() { return count++; }
  increment();
})();

<button onclick="alert(counter())">Counter</button>

Answer 1

Do closure always need to be declared using function expression and not function definition declaration

No. Any function definition will form a closure when it closes over an outer-scope variable.

It's just that usually when using a closure, we want to do a single thing with the function object so we just put it as an expression in the call or assignment or return statement instead of declaring it up-front and the referring to it by name.

Do closure need to be self invoked in function expression

No. Most IIFEs are not closures at all. They do however often provide a scope for closure definitions. Closures can be created in any kind of scopes though, even in block scopes (with let/const).

I understand key difference between function declaration and function expression is hoisting. What are the other advantages and disadvantages of using any one of them?

Have a look at var functionName = function() {} vs function functionName() {}.

Can anyone help me when and which in situation i should decide whether i should go with function declaration or function expression.

Whenever you initialise a variable declaration with a function expression, just use a function declaration instead. Otherwise, you'll mostly use function expressions.

---

Your example doesn't really have anything to do with the question. There is no difference between

function makeCounter() {
    var count = 0;
    return function increment() { return count++; }
}

and

function makeCounter() {
    var count = 0;
    function increment() { return count++; }
    return increment;
}

except that the first a line shorter. And of course you have to do

var counter = makeCounter(); // assigns increment function to counter
counter(); // calls increment

to count anything. In your IIFE version you just inlined makeCounter as a function expression:

var counter = (function makeCounter() {
    var count = 0;
    return function increment() { return count++; }
    // increment(); - this statement is never evaluated
})();
counter();

Answer 2

Closure

According to this definition, closure is just combination of a function and a lexical environment in which a function is declared.

In your case, you declared a function counter which returns a child function. It means when you run counter(), it will return a function reference which has lexical scope of counter. You need to call that function reference to increase counter.

var counterRef= counter();

<button onclick="alert(counterRef())">Counter</button> will work in your case.