Closure에 대하여

nevermind·2022년 12월 5일
0

기술면접

목록 보기
9/25
post-custom-banner

👣 Closure

클로저는 함수와 그 함수가 선언되었을 때의 렉시컬 환경(Lexical environment)의 조합이다 -MDN-

  • Javasciprt 고유의 개념이 아니라 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다

  • MDN 에서의 함수란 반환된 내부함수, 그 함수가 선언되었을 때의 렉시컬 환경 내부함수가 선언되었을 때의 스코프를 의미

  • 클로저는 반환된 내부함수가 자신이 선언되었을 때의 환경(렉시컬 환경)인 스코프를 기억하여 자신이 선언되었을 떄의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수 => 클로저는 자신이 생성될 때의 환경을 기억하는 함수이다

  • 내부함수가 유효한 상태에서 외부함수가 종료하여 외부함수의 실행 컨텍스트가 반환되어도, 외부함수 실행 컨텍스트 내의 활성객체(변수, 함수 선언 등의 정보를 가지고 있음)는 내부함수에 의해 참조되는 한 유효하여 내부함수가 스코프 체인을 통해 참조할 수 있다.

function outerFunc() {
  var x = 10;
  var innerFunc = function () { console.log(x); };
  innerFunc();
}

outerFunc(); // 10
  • 함수 outerFunc 내에서 내부함수 innerFunc가 선언되고 호출되었다. 이 때 내부함수 innerFunc는 자신을 포함하고 있는 outerFunc의 변수 x에 접근 가능하다. 렉시컬 스코핑때문

렉시컬 스코핑이란?
스코프가 함수 호출시가 아니라 어디서 선언하였는지에 따라 결정하는 것 (위의 예시는 함수 innerFunc는 함수 outerFunc 내부에 선언되었기에 함수 innerFunc의 상위 스코프는 함수 outerFunc임)

  • 실행컨텍스트에서의 관점
    - 내부함수 innerFunc가 호출 ->
    자신의 실행 컨텍스트가 실행 컨텍스트 스택에 쌓임 ->
    변수 객체와 스코프 체인, this에 바인딩할 객체 결정 ->
    스코프 체인은 전역 스코프를 가리키는 전역 객체와 outerFunc의 스코프를 가리키는 활성 객체, 함수 자신의 스코프를 가리키는 활성 객체를 순차적으로 바인딩함

    - 상위 스코프에 접근할 수 있는 것은 렉시컬 스코프의 레퍼런스를 차례대로 저장하고 있는 실행 컨텍스트의 스코프 체인을 js 엔진이 검색 였기에 가능하다

    👀 정리

  • 클로저는 내부함수와 내부함수가 선언되었을 때의 렉시컬 환경의 조합이다. 외부함수 안에 어떠한 변수가 있고 그 변수를 참조하는 내부함수가 있을시에 외부함수가 종료되어도 내부함수와 내부함수가 참조하는 변수를 사용할 수 있다.
    그 이유는 실행 컨텍스트에 정보들이 저장될 때, 내부함수가 선언된 지점에서 렉시컬 스코프로 인하여 참조하는 환경객체(변수,함수 등)를 가지고 있기에 선언하고 접근할 수 있는 것이다.

  • 클로저는 자신이 생성될 때의 환경을 기억하는 함수이다

  • 클로저가 가장 유용하게 사용되는 상황은 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것이다.(예: onClick 함수)


    출처:
    https://poiemaweb.com/js-closure

profile
winwin
post-custom-banner

0개의 댓글