😇 "Javascript Closure"이 글을 읽고 나면 마침내 무엇인지 알 수 있을 것 같아요

💎 기능 중 기능

▼ 함수에서 자바스크립트에서 함수를 선언할 수 있음

function outer(){
    function inner(){
        alert("poland");
    }
}
outer(); // unfortunately, nothing happens

▼ 내부 함수를 실행하기 위해 다음과 같이 작성할 수 있습니다.

function outer(){
    function inner(){
        alert("poland");
    }
    inner() // here !!!!!
}
outer() // "poland" !

💎 익명 기능

지금 실행 순서는

1. execute outer()
2. declare inner()
3. execute inner()

번거롭죠? 😂
예, 익명 함수로 alert("poland") 더 짧게 실행할 수 있습니다.

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

💎 함수를 반환하는 함수

(2분 안에 마침내 클로저가 무엇인지 알 수 있습니다)
▼ 함수는 Javascript에서 함수를 반환할 수 있습니다.

function outer(){
    var inner = function (){
        alert("poland");
    }
　　return inner;
}

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

▼ 조금 변형하고 내부 기능을 정상적으로 정의

function outer(){
    function inner (){ //** here
        alert("poland");
    }
　　return inner;
}

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

▼ 이제 inner()를 삭제하고 익명 함수를 사용합니다.

function outer(){
    return function(){ //** here
        alert("poland");
    }
}

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

▼ 그런 다음 조금 tranfrom 경고 기능 전에 문자열 "폴란드"를 선언합니다.

function outer(){
    return function(){
        var country = "poland"
        alert(country);
    }
}

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

▼ -- ⭐ 중요!! -- 마침내 var country를 외부 내부 익명 함수로 이동

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

▼ 이 눈으로 쉽게 볼 수 있습니다

💎 실생활 예 1

폐쇄에 대한 일반적인 질문이 있습니다.

define function that return 1,2,3... each time you call it

면접에서 물어봐도 이상하지 않아

function outer(){
    var num = 1;
    return　function (){
        alert(num);
    x ++;
    };
}

var func =  outer(); 
func();  // 1
func();  // 2
func();  // 3
console.log(num) //undefined

그리고 중요한 것이 하나 더 있습니다.
그 코드에서 볼 수 있듯이 "num"은 외부 함수를 호출할 수 없으므로 클로저를 통해 개인 변수와 같은 것을 만들 수 있습니다.

💎 실생활 예 2

솔직히 예 1은 "실생활"예를 정의하기가 어렵습니다. 이 지식을 아는 것이 중요하지만 말입니다.
하지만 이제 더 많은 실제 사례를 보여 드리겠습니다.

이것은 일반적인 jquery 코드입니다.

// anonymous function
$('.button').click(function(){
  alert('Hi!');
});

그러면 2번 이상 클릭을 방지하는 기능을 만들 수 있습니다.

$(function(){
    var isClicked = false;
    $('.button').click(function(){
        if (isClicked) {
            alert('you have already clicked once !!');
            return false;
        }
        isClicked = true;
    });
});

읽어 주셔서 감사합니다 :)

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