ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 클로져
    프론트 공부 2023. 4. 12. 03:23

    클로저

    • 클로저는 외부함수 의 변수에 접근할 수 있는 내부 함수!!!!!
    • 즉 내부함수가 이미 생명주기를 마감한 외부함수의 지역변수에 참조할 수 있다면 !!!!
    •  자바스크립트에서 함수는 태어나면 본인의 내부슬롯에 상위 스코프를 참조를 저장한다. ❗❗❗
    function outerFunc() {
     const x = 10;
     const innerFunc = function () { 
     console.log(x); 
     };
     return innerFunc();
    }
    
    const ella = outerFunc();
    ella(); // 10

    실행이 종료된 outerFunc()의 변수 x 에 접근이 가능하기 때문에 innerFunc()는 클로져이다.

    outerFunc 함수 종료 전 실행 컨텍스트

     

    outerFunc 함수 종료 후 실행 컨텍스트

    • outer함수가 생명주기가 끝다면서 실행 컨텍스트 스택에서 제거가 되었지만 이너 함수는 내부슬럿에 상위 스코프 참조를 유지하고 있기 때문에 이를 참조하여 생명주기가 끝난 외부함수의 변수에 접근이 가능하다.
    • 즉 innerFunc() 함수는 outerFunc() 함수의 변수에 참조가 가능하기 때문에  ella의 값은 10이 된다.

    외부 환경 참조(Outer Environment Reference)

    바깥 Lexical Enviroment를 가리킨다

    • 환경레코드 + 외부환경 참조 = Lexical Enviroment

     

    function sum(x){
      return function (y) {
    	return x + y;
    	};
    }
    const add = sum(2);
    console.log(sum(7))

    본 코드는 sum 함수에서 익명함수를 리턴하고, 리턴된 익명함수 add 변수에 할당해 결과를 출력하는 코드이다.

     

    1. sum 함수와 add 변수를 호이스팅 하고  환경 레코드에 기록하고 전역 평가가 이루어지고 있어 outer 에는 null 값이 할당된다.  --> 콜스택에 Global의   Lexical Enviroment를 추가한다
    2. 평가가 끝나고 코드가 순차적으로 실행된다.
    3. add 변수에 값을 할당하기 위해 sum 함수를 호출한다.
    4. sum 함수의 x 변수와 익명함수를  호이스팅하여 환경레코드에 저장하고 outer 에는 상위 스코프인  Global Lexical Enviroment를 가리키게 된다. -->  콜스택에 sum의   Lexical Enviroment를 추가한다
    5. 평가가 끝나고 sum() 함수 코드가 순차적으로 실행된다.
    6. 매개변수 x 에는 인자로 넘겨준 2를 할당하고, 환경레코드에 x=2 라는 값을 기록한다.
    7. 이후 실행할 코드가 없어 sum의   Lexical Enviroment는 제거된다.
    8. add 변수에 sum 함수의 리턴값인 익명함수를 할당하고 환경레코드에 있는 add 변수에 익명함수를 할당한다.
    9. 마지막 코드인 console.log()를 실행하기 위해 add 함수를 호출한다.
    10. add 함수 매개변수 y를 호아스팅하여 환경레코드에 기록하고, outer에는 sum의 Lexical Enviroment 를 가리키게 된다. --> 콜스택에 sum의   Lexical Enviroment를 추가한다.
      1. 자바스크립트에서 함수는 태어나면 본인의 내부슬롯에 상위 스코프를 참조를 저장한다. ❗❗❗
      2.  sum 함수 내부 평과 과정에서 sum의 Lexical Enviroment를 익명함수에 저장한다.!!!!
      3.  
    11.  add 함수의 코드 평가과정이 끝나고 코드가 순차적으로 실행된다.
    12. 매개변수 y =7 를 환경레코드에 기록한다.
    13. return 문이 실행된다.
      1. 여기서 return 문의 x 값은 addLexical Enviroment에 없기 때문에 스코프 체이닝을 이용하여  sum Lexical Enviroment x =2 값을 참조한다.
      2. add Lexical Enviroment가 콜스택에서 제거된다.
    14. x=2, y=9 -> console.log(9) 라는 결과 값이 나온다.
    15. Global Lexical Enviroment가 콜스택에서 제거된다.

    '프론트 공부' 카테고리의 다른 글

    JavaScript의 구조 분해 할당(Destructuring Assignment)  (0) 2023.04.25
    고차함수 정리  (0) 2023.04.17
    Section2 기술면접 준비  (0) 2023.04.10
    자바스크립트 실행 컨텍스트  (0) 2023.04.06
    REST API  (0) 2023.03.29
Designed by Tistory.