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 함수에 의해서만 변경이 가능합니다.





      저작자표시

      'Web > JavaScript' 카테고리의 다른 글

      [javascript] 55. DOM 문서(DOM document) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 54. DOM 메소드(DOM method) - 자바스크립트 강좌  (0) 2015.06.13
      [javascript] 53. HTML DOM - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 51. 함수 호출(function invocation) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 50. 함수 매개변수(function parameters) - 자바스크립트 강좌  (0) 2015.06.13
      [javascript] 49. 함수 선언(function definitions) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바