Do you really have Closure in Javascript? Enter, let me understand

For developers who have just learned Javascript, they have been developing Javascript for years, often we have used Closure in everyday life but don't really understand what Closure is and what the real mechanism is.

in Javascript we often use the function return function like this

// global scrope
// ...
function myFunction (n) {
 // local scope to myFunction
 // ...
 // lexical scope to herFunction
 // ...
   return herFunction (p) {

      // local scope to herFunction

   }

}
It's just that we lack attention with this kind of code and don't even know that actually it has an important mechanism that every programmer should know.

What is Closure in Javascript?
Closure is a mechanism in Javascript where a function can access / remember variables in the lexical scope in the parent function after the parent function is defined and it is projected from memory.
In the code snippet above, briefly the Closure allows a function to access all variables in the scope of its parent (the function that defines it). So Closure makes herFunction able to access all the variables that myFunction has.
The closure is made by Javascript when there is a function that returns other functions. so if you make a function then the return is a function too, then Javascript will make the Closure

Dizzy? note the following example

multiplication function (a) {
    return function (b) {
        return a * b;
    }
}


// multiplication base five
var kaliLima = multiplication (5);
kaliLima (10); // 5 x 10
As soon as we write as above at the time of execution, the multiplication function () and the argument are destroyed from memory. And the variable timesLima now contains the function definition of the return result from the multiplication function ()
In other words, behind the actual javascript creates the following code:
var kaliLima = function (b) {return a * b; }
Note that when we make a statement
var kaliLima = multiplication (5);
it's actually the same as
var kaliLima = function (b) {return a * b; }
see that the variable a should be in the statement return a * b; it's undefined, because a is the argument of the multiplication function (a) and both are destroyed from the memory callstack when the code is executed. So the variable a should no longer have references ... but it turns out that when we call this
kaliLima (10); // 5 x 10
the result is valid and not error ... why does it work? Now it turns out that the variable A is still there ... it's just that the location has now been moved with Javascript, which is now located in the Scope Closure
If we run it in a browser console like this
> console.dir (kaliLima)
Then the output will come out like this

See now the variable a moves to the Scope Closure property.
Still don't understand? We try to use Analogy
Closure is like Superman, the superhero from the planet Crypton. Even though Crypton Planet has been destroyed (in Destroy) and Superman is out of there but Superman still has things related to Crypton (properties) like super powers and fear of cryptonite stones
planetryry function () {

     let superPower = 'yes';
     let scared afraid Cryptonite = 'yes';

     let superman = function () {
           return 'superman:' + superPower + fear Cryptonite;
     }

     superman return;

}
Exercise
multiplication function (a) {
   return function (b) {
      return a * b;
   }
}
Is the Closure the function above? yes right ... Closure is a
Closure: {a: [value argument]}
Now what if the function is like this
multiplication function (a) {
   var x = 3;
   var y = 5;

   return function (b) {
      return a * b * x * y;
   }
}

// times base 7
var kali Free = multiplication (7);
free times (4);
What are the Closures? The closure is
Closure: {
  a: 7
  x: 3
  y: 5
}
so free times (4) are the same as: return 7 x 4 x 3 x 5;
Now how about this
 function sayName (name) {
   var prefix = 'My Name is';

   return function (degree) {
      return prefix + name + degree;
   }
 }

 var agus = sayName ('Agus');
 var sayAgus = agus ('S.kom');

 console.log (sayAgus); // My Name is Agus S.kom
What is the Closure from the function above? yes Closurenya is
Closure: {
   name: 'Agus',
   Prefix: 'My Name is'
}
How do you understand what Closure is? Please comment below if there are questions. You can also check Repo the above codes in Closure
The following is the Complete Javascript Learning & Javascript Learning Material for Beginners in Indonesian

Share this