ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [javascript] 52. closure - 자바스크립트 강좌 JS / CSE
    Web/JavaScript 2015. 6. 13. 15:35


    JavaScript Closures

     자바스크립트 변수는 지역 변수 혹은 전역 변수에 속해 있습니다.


     Private 변수는 closures를 통하여 만들 수 있습니다.





    1. Global Variables

     함수는 함수내에 선언된 모든 변수를 접근 할 수 있습니다:



    1
    2
    3
    4
    function myFunction() {
        var a = 4;
        return a * a;
    }
    cs
     



     그러나, 함수는 함수 밖에 선언된 변수 또한 접근 가능합니다:


    1
    2
    3
    4
    var a = 4;
    function myFunction() {
        return a * a;
    }
    cs
     


     위의 예제에서는 a는 전역 변수입니다.


     웹 페이지에서, 전역 변수는 윈도우 객체(Window Object)에 속합니다.


     전역 변수는 페이지 내의 모든 스크립트에서 사용되어 집니다.


     맨 처음 예제에서는 a는 지역 변수입니다.


     지역 변수는 선언된 함수 내에서만 사용 가능 합니다. 







    2. Variable Lifetime

     전역 변수는 어플리케이션이 살아 있는 한 계속 살아 있습니다.


     지역 변수는 짧은 삶을 갖습니다. 함수 호출에 의해 생성되어서, 함수가 끝나면 사라집니다.











    3. A Counter Dilemma

     어떤 것을 세기위해 변수를 생성하여, 모든 함수에서 사용가능한 카운터를 만들고자 합니다.


     전역 변수를 사용하여, 함수에서 카운터를 써서 증가를 할 수 있습니다:


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var counter = 0;
     
    function add() {
        counter += 1;
    }
     
    add();
    add();
    add();
     
    // the counter is now equal to 3
    cs

     


     카운터는 add() 함수에 의해서만 변경되어 집니다.


     문제는 add() 함수를 호출할 필요없이 다른 어떤 스크립트에서도 카운터를 변경할 수 있다는 것입니다.


     카운터를 함수 내에 선언 한다면, add() 함수 호출 없이는 누구도 값을 변경 할 수 없을 것입니다:



    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!DOCTYPE html>
    <html>
        <body>
     
        <p>Counting with a local variable.</p>
     
        <button type="button" onclick="myFunction()">Count!</button>
     
        <p id="demo">0</p>
     
    <script>
    function add() {
    var counter = 0;
    return counter += 1;
    }
     
    function myFunction(){
    document.getElementById("demo").innerHTML = add();
    }
    </script>
     
        </body>
    </html>
     
    cs
     

     




     




     위 예제는 제대로 작동하지 않습니다! add()함수를 호출 할 때마다, 카운터는 1로 설정 됩니다.


     자바스크립트 내부 함수가 위 문제를 해결 합니다.






    4. JavaScript Nested Functions

     모든 함수는 전역 범위를 접근 할 수 있습니다.


     사실상 자바스크립트에서는, 모든 함수는 그들 자신의 상위 범위는 당연히 접근 가능 합니다.


     아래 예제에서, 내부 함수 plus()는 상위 함수의 카운터 변수를 접근하게 해줍니다:





    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     
    <!DOCTYPE html>
    <html>
        <body>
     
        <p>Counting with a local variable.</p>
     
        <p id="demo">0</p>
     
    <script>
    document.getElementById("demo").innerHTML = add();
    function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
    }
    </script>
     
        </body>
    </html>
     
    cs
     

     






     plus() 함수가 외부에서 호출되므로, 카운터 딜레마를 풀었습니다.


     counter = 0의 실행이 단지 한 번만 실행되는 방법이 필요합니다.


     closure가 필요합니다.







    5. JavaScript Closures

     아래 예제를 먼저 살펴봅니다:


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    var add = (function () {
        var counter = 0;
        return function () {return counter += 1;}
    })();
     
    add();
    add();
    add();
     
    // the counter is now 3
    cs

     




     변수 add는 자가 호출 함수의 값을 반환하는 것을 할당했습니다.


     자가 호출 함수는 한 번 실행 됩니다. 카운터를 0으로 설정하고, 함수 식을 반환합니다.


     위 방법이 add를 함수로 만들게 합니다. 놀라운 부분은 상위 범위에서도 카운터를 접근 할 수 있다는 것입니다.


     이러한 것을 자바스크립트 closure라고 합니다. 함수의 private 변수를 갖게하는 방식을 말합니다.


     카운터는 익명의 함수의 범위에서 보호를 받고, add 함수에 의해서만 변경이 가능합니다.





    댓글

Designed by Tistory.