[JavaScript] 클로저

Rose Jang·2022년 11월 13일
0

렉시컬 스코프

자바스크립트 엔진은 함수를 어디서 호출했는지가 아닌, 어디서 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라고 한다.

const x = 1;

function foo() {
  const x = 2;
  bar();
}

function bar() {
  console.log(x);
}

foo();	// 1
bar();	// 1
// 함수가 정의된 위치에서 상위 스코프를 결정하기 때문에, foo와 bar의 상위 스코프는 전역이다.




클로저 (Closure)

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.

const x = 1;

function outer() {
  const x = 10;
  const inner = function () { console.log(x); };
  return inner;
}

const innerFunc = outer();
innerFunc();	// 10

위 예제에서 outer 함수를 호출하면 outer 함수는 inner 함수를 반환하고 생명주기를 마감해 outer 함수의 지역 변수 x에는 더이상 접근할 수 없어 보이지만, innerFunc의 실행 결과는 outer 함수의 지역변수 x의 값인 10이다.

이처럼 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수클로저라고 부른다.

0개의 댓글