[JavaScript] 클로저 closure

[클로저]

함수내에서 사용한 변수를 외부에서 사용할 수 있게 하는 기능

localScope -> grobal Scope

 function funcA(title){

            var name =title;

            return function(){

                console.log("안녕"+name+"공부 열심히 하자");

            }

        }

        console.log(name);//위에 함수실행이 끝났기 때문에 name은 출력안됨

        var closure = funcA("홍길동");

        closure(); //클로저를 실행하면 접근이 가능하다

        console.log(closure); //이렇게 하면 grobal scope가되서 출력가능

        

  

        function test2(name, age){

            var name = name;

            var age = age;

            //var를 선언안한 전역변수(grobal scope)

            getName = function(){

                return name;

            }

            getAge = function(){

                return age;

            }

            setName = function(chName){

                name = chName;

            }

            return function(){

                return name+age;

            }

        }

        

        test2("홍길동",20); //매개변수를 넣어서 한번 실행해야만 밑에서 변수들을 불러올 수 있음

        console.log("set 전"+getName); 

        console.log(getName());

        console.log(getAge());

        console.log(getAge());

        setName("거북이");

        console.log("set 후"+getName);

    </script>

[카운터 만들기]

전역번수를 이용한 카운터 /  클로저를 이용한 카운터 만들기

<button onclick="g_doCounter();">전역카운터</button>

    <button onclick="doCounter(10);">closure카운터</button>

    <div>

        <span id="g"></span>

        <span id="c"></span>

    </div>

    <script>

        var cnt = 0;

        var gCounter = document.getElementById("g");

        var cCounter = document.getElementById("c");

        //전역카운터

        function g_doCounter(){

            gCounter.innerHTML = "<h1>"+(++cnt)+"</h1>";

        }

        

       function changeVal(va){

           cnt = va;

       }

cnt = 10; //전역변수

        //클로저 카운터

        function c_counter(){

            var count = 0;

            return function(sum){

                cCounter.innerHTML = "<h1>"+((++count)+sum)+"</h1>";

            }

        }

        var doCounter = c_counter();

    </script>