TIL/JavaScript

Closure

han1693516 2022. 10. 5. 16:21

closure
   - const secureBooking = function(){
         let passengerCount = 0; // 외부에서 접근 불가
         return function(){
              passengerCount++;
              console.log(passengerCount);
          }
       }

      const booker = secureBooking();
      booker(); // 1
      booker(); // 2
      booker(); // 3

   - closure는 함수 자신이 자신이 생성됐을 때의 모든 변수를 기억

   - 위의 예시를 보면, booker 함수는 secureBooking 밖에 존재한다. 
      그렇다면 어떻게 passengerCount를 조정할 수 있는지?
           - booker 함수는 secureBooking의 execution context에서 생성됨
                - 따라서 passengerCount에 접근 가능!(이러한 연결을 closure라 부름)
       
            - cf> closure로 함수의 argument도 접근 가능
            - cf2> clusre는 scope chain보다 우선권이 있음 

     - closure 정의 : 함수가 생성되었을 때의 execution context(이는 call stack에서 execution context가 사라진 이후)    
                         : return된 함수가 부모 함수의 모든 변수에 접근할 수 있게 함      
                              - 그 함수는 외부 스코프의 refercence를 유지하고, scope chain을 계속 유지함  
                          : 자식 함수에게 부모 함수 생성 시의 부모 함수 내부 변수와의 connection을 잃지 않게 함(이는 부모 함수가 사라진 이후에도 유지됨)
                          : 예를 들면 자식 함수는 항상 가방을 메고 다니는데, 배낭 안에는 부모 함수가 만들어질 때의 변수를 저장
                                 - 참조하려는 변수가 함수 안에 없다면, 함수는 closure 확인 후, scope chain을 올라감

      - closure는 참조 불가능, closure는 객체 같은 자료형이 아닌 함수의 internal property
      - console.dir()를 통해 closure 확인 가능
           ex)console.dir(booker) // ....
           cf> 출력 결과에서 [[   ]] 로 싸여져 있는 것은 코드로 접근 불가하다는 뜻      
                           
      - closure는 부모 함수에서 return 되는 함수만 가지는 것이 아님,
        함수 내부에서 생성된 함수 역시 부모 함수에 대한 closure를 가짐
  
   
     

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

Math method  (0) 2022.12.16
Converting and Checking numbers  (0) 2022.12.16
Call, Apply, Bind  (0) 2022.09.27
String Method  (0) 2022.09.02
map, set  (0) 2022.08.28