😇 "Javascript Closure" I think you can get what it is finally after reading this
Tags: javascript, beginners, frontend, programming
Published: 2022-05-18 16:07:25

## 💎 function in function
▼ in function can declare function in javascript
```javascript
function outer(){
    function inner(){
        alert("poland");
    }
}
outer(); // unfortunately, nothing happens
```

▼ we can write like this to execute inner function
```javascript
function outer(){
    function inner(){
        alert("poland");
    }
    inner() // here !!!!!
}
outer() // "poland" !
```

## 💎 Anonymous function

now executing order is
> 1. execute outer()
> 2. declare inner()
> 3. execute inner()

it's troublesome isn't it? 😅
yeah we can execute `alert("poland")` shorter by anonymous function

```javascript
(  function(){ alert("poland"); }  )(); // "poland"
```

## 💎 function which return function
(in 2 min you can get what is closure finally)
▼ function can return function in Javascript
```javascript
function outer(){
    var inner = function (){
        alert("poland");
    }
　　return inner;
}

var func = outer();
func();// "poland"                 
```

▼ transform it a little bit, define inner function normally
```javascript
function outer(){
    function inner (){ //** here
        alert("poland");
    }
　　return inner;
}

var func = outer();
func();// "poland"
```

▼ now delete inner() and use anonymous function
```javascript
function outer(){
    return function(){ //** here
        alert("poland");
    }
}

var func = outer();
func();// "poland"
```

▼ then tranfrom a little bit, declare string "poland" before alert function
```javascript
function outer(){
    return function(){
        var country = "poland"
        alert(country);
    }
}

var func = outer();
func();// "poland"
```

▼ -- ⭐ IMPORTANT!! -- At last move var country to outside inner anonymous function
```javascript
function outer(){
    var country = "poland"
    return function(){
        /** ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐
           looks like we can't see country
           because country is declared outside anonymous function. 
           But we can see it, this is typical closure 
        ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ **/
        alert(country);
    }
}

var func = outer();
func();// "poland"
console.log(country) // ⭐ undefined because of scope
```
▼ You can see easily with these eyes
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xu2j55go451zt7lwnfm.png)

## 💎 Real life example 1 (increment number)
there is typical question about closure
> define function that return 1,2,3... each time you call it

it's not weird if you're asked about in in interview.

▼ If you write like this, result shows just 1 three times
```javascript
function increment() {
  let num = 0 
  num = num + 1
}
increment()//1
increment()//1
increment()//1
```

if we put `let num = 0` in global variable
↓

```javascript
let num = 0

function increment() { 
  num = num + 1
}
increment()//1
increment()//2
increment()//3
```

the answer is correct, but someone could change this `num` so easily by chance, it's dangerous
↓

```javascript
function incrementFactory() {
  let num = 0
  function increment() {
    num = num + 1
  }
  return increment
}

// factory is just increment function
const factory = incrementFactory()

// ⭐ here only "increment()" execute, so it doesn't have effect to "let num = 0"
factory()// 1
factory()// 2
factory()// 3

```

as you can see in that code, "num" can't call outside outer function, so we can create like private variable by closure 

(▼just note for myself in Japanese)
incrementFactoryは最初の１回定義されるだけなので、let num = 0 が毎回定義されてnumが0になることはないっす

## 💎 Real life example 2
Honestly example 1 is hard to define "real life" example, even though it's important to know this knowledge.
But now I'm gonna show you more real life example.

this is typical jquery code
```javascript
// anonymous function
$('.button').click(function(){
  alert('Hi!');
});
```

then I can make function that prevent clicking more than 2 times
```javascript
$(function(){
    var isClicked = false;
    $('.button').click(function(){
        if (isClicked) {
            alert('you have already clicked once !!');
            return false;
        }
        isClicked = true;
    });
});
```

Thank you for reading :)

ref:
https://qiita.com/takeharu/items/4975031faf6f7baf077a
http://dqn.sakusakutto.jp/2009/01/javascript.html