[JS] CLOSURE

Chipmunk_jeong·2021년 8월 6일
0

TIL

목록 보기
58/62
post-thumbnail

해당 블로깅은 인프런의 강의를 들으며 공부한 내용을 정리한 글입니다.
ES5 기준 핵심 내용을 공부하면서 작성하는 블로깅

CLOSURE

클로저의 사전적 정의 - 닫힘 / 폐쇄 / 완결성
mdn에선 이렇게 정의한다.

클로저는 함수와 그 함수가 선언될 당시의 lexical environment의 조합이다.

개인적으로 모든 클로저에 대한 한줄정의를 보았지만, 와닿는 표현이 없는것 같다.

클로저는 우선 특수한 현상에서 발생한다.

function outer() {
  var num = 1;
  function inner() {
    return num++;
  }
  return inner;
}
var plusNumber = outer();
console.log(plusNumber());
console.log(num);
  1. 전역 컨텍스트가 열림
    • outer함수, plusNumber변수가 environmentRecord에 수집됨
  2. 전역 컨텍스트 위 부터 한줄씩 실행됨
    • outer를 호출함
  3. outer함수의 컨텍스트가 열림.
    • num변수, inner 함수가 environmentRecord에 수집됨
  4. outer의 코드 한줄씩 실행
    -> num에 1을 할당
    -> inner함수 리턴
  5. outer컨텍스트가 닫히고 전역 컨텍스트로 돌아옴
  6. plusNumberinner함수가 할당됨
  7. plusNumber를 실행하면서 inner실행 컨텍스트가 열림
  8. num이라는 변수를 찾기위해 environmentRecord를 찾아보지만 없어서 outerEnvironmentReference을 접근해 num을 참조함
  9. 그래서 plusNumber()의 콘솔은 num의 값을 접근하여 출력
  10. 하지만 그냥 num을 출력시 현재 컨텍스트의 environmentRecordnum이 존재하지않아 undefined또는 error를 발생시킴

위의 예제가 클로저가 발생하는 특수 상황이다.
콘솔의 결과를 확인해보면 plusNumber를 호출했을때 리턴되는 num의 값은 정상적으로 출력이 되지만, num자체를 출력해보려하면 undefined가 된다. 이 num이라는 변수가 현재 Closure현상에 속한다.

클로저는 A라는 실행컨텍스트에 선언된 B라는 함수에서 A에 선언된 변수를 참조를 하는데, B라는 함수가 A가 아닌 다른 컨텍스트에서 호출이 되면서 A의 컨텍스트가 끝나더라도 A에 선언된 변수가 가비지 컬렉션에 의해 지워지지 않고 참조되는상태라고 나는 정리를 했다.

클로저는 지역변수를 외부에서 접근하지 못하도록 보호하며, 함수 컨텍스트가 종료되어도 사라지지 않는 지역변수를 만들 수 있다.

profile
Web Developer

0개의 댓글