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