Free Variable: Free variables are simply the variables that are neither locally declared nor passed as parameter. We know about scope in JavaScript, We create private variables to enable encapsulation. To write Function or variables created in a function has local scope and not accessible out from that function blocks.
Let us create local variable and function for example:
function sum(no1) {
var i=1;
console.log("parent scope");
function sum2(){
console.log("child scope");
console.log(no1)
}
}
sum(1);
When you will run this program you will get parent scope in your console. Because when you call function sum it runs its whole body, which consist a function sum2 which is not called by anyone so sum2 scope is left unruned. In above example sum2 and i is a private function and variable for function sum, sum2 and i is callable from inside of sum function only but not available to global scope which completes our encapsulation requirement. Can we create private function can call from outside of its function scope. Here I will try to explain how we can achieve this. Now use this code and run it.
<script>
function sum(no1) {
console.log("parent scope");
return function() {
console.log("child scope");
console.log(no1);
}
}
console.log(sum(1));
</script>
Think what result should be checkout result in your console.
parent scope child scope 1 // result
No, When you run above program you will found below result in your console.
parent scope anonymous()
Reason it will runs like previous code but this time as we return result from function sum which is a function, it will return function as it is but will not run that function as you have not called it yet. To call this we need to add another bracket to call it.
Like:
sum(1)();
Now you will get the expected result, that is
parent scope child scope 1
Now what is the use of it?
To understand the benefit of using double brackets consider below example:
<script>
function sum(no1) {
console.log("parent scope");
return function(no2) {
console.log(no1)
console.log(no1 + no2)
}
}
sum(1)(5);
</script>
parent scope child scope 6 // Result
Why result here is 6?
Logically when first bracket (sum(1)) will run it will return a function. Here scope of sum() should finish and returned function will run in another scope which takes input no2 to run itself. So result should be undefined when we try to print no1 in console, But it prints 1. Because every function maintains internal data structure what variable it can store, therefore scope of function sum is not finish for its second bracket (5) and function can use its variable no1 here. For private function variable no1 is free variable, which can be access by it.
This is the best example of closure what is closures? In JavaScript closures, those are simply the variables that the function takes (read and write) in the enclosing scope where is declared the closure or a parent scope.