[TIL 13][JS] Closure

Mustache 🥸·2021년 4월 15일
0

Javascript

목록 보기
6/12
post-thumbnail
post-custom-banner

개요

자바스크립트는 공부할수록 어려운거 같다. 물론 다른 언어들도 마찬가지겠지만 말이다.
잡설은 여기서 멈추고.. 오늘은 클로져에 대해서 공부해보았다.
Closure는 주변환경을 기억하는것이다. 좀 풀어말하자면 function 오브젝트를 생성할 때, 함수가 속한 scope를 [[Scope]]에 설정하고, 함수가 호출되었을 때 [[Scope]]의 프로퍼티를 사용하는 것이다.

EC: {
  LEC: {
    ER: {
      DER: {},
      OER: {}
    },
    OLER: {}
  }
}

실행 중인 function 오브젝트에 작성한 변수,함수를 선언적 환경 레코드에 설정하고 [[Scope]]의 변수,함수를 외부 렉시컬 환경 참조(OLER)에 바인딩한다. 그래서 변수 이름으로 접근하여 값을 사용하거나 변경할 수 있고, 함수를 호출할수도 있다.

예시

function say () {
  const a = 1;
  const b = 2;

  function log () {
    console.log(a + b);
  }

  return log;
}

const func = say();

func();
  • 위 함수에서 func가 가리키는 것은 log이다.
  • func 함수가 실행될 때 a,b 변수가 담겨있는 say 함수의 scope의 외부임에도 a,b의 값을 출력하는데 문제가 없다. 이것은 log 함수가 say 내부에서 선언될 때 closure로 인해 a,b의 값을 외부 렉시컬 환경 레코드(OLER)에 바인딩된다. 그러면 console.log(a + b)를 실행할 때 log 함수의 선언적 환경 레코드(DER)에는 a, b 값이 없으므로 외부 렉시컬 환경 레코드(OLER)를 통해 a, b값을 가져와서 사용한다. 그래서 func 함수가 실행될 때 기억되어있는 변수를 접근할 수 있는 것이다.
post-custom-banner

0개의 댓글