내일배움캠프 16일차 : 클로저 개념

자바스크립트의 클로저에 대해 확실히 이해가 가지가 않아 오늘은 클로저에 대해 정리해보려 한다.

 

1. 클로저란

함수와 함수가 선언된 렉시컬 환경과의 조합

const x = 1;

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

  innerFunc();
}

outerFunc();

 

내부 스코프에 x값이 없어서 바깥쪽 스코프에서 찾아온다. (outer - 해당 실행컨텍스트 생성시점의 렉시컬환경을 가지고 있음)

그래서 10에 먼저 접근하고 10을 출력

 

const x = 1;

// innerFunc()에서는 outerFunc()의 x에 접근할 수 없죠.
// Lexical Scope를 따르는 프로그래밍 언어이기 때문
function outerFunc() {
  const x = 10;
  innerFunc(); // 1
}

function innerFunc() {
  console.log(x); // 1
}

outerFunc();

 

위 코드는 스코프 자체가 서로 다르기 때문에 영향을 끼치지 않는다. - 변수 공유 불가

innerFunc를 outerFunc에서 호출했다고 해도 변수 접근 불가

 

(1) 렉시컬 스코프

함수를 어디서 정의했는지에 따라 상위 스코프 결정 (호출 위치 전혀 상관없음)

 

(2) Outer 정의된 환경에 대한 정보를 저장하는 곳

함수가 정의된 환경(위치)과 호출 환경(위치)이 다를 수 있기 때문에, 호출 환경과 상관없이 정의된 환경에 대해 LexicalEnvironment > Outer에 기억함

 

(3) 클로저와 렉시컬 환경

외부함수보다 중접함수가 더 오래 유지되는 경우, 중접함수는 이미 생명주기가 종료한 외부함수를 여전히 참조할 수 있음

(중접함수 - 클로저)

 

const x = 1;

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

const innerFunc = outer();
innerFunc();

 

- outer()을 호출하면 inner가 반환된 후, outer 함수의 실행컨텍스트 팝되어 사라짐 - 역할 끝났기 때문에

- inner 함수가 런타임에 평가된 후 ineerFunc에 전달됨 - outer함수의 렉시컬 환경 여전히 참조
 가비지 컬렉터가 안 쓰는 것만 가져가기 때문

 

ex) 클로저가 아닌 것

function foo() {
  const x = 1;

  // bar 함수는 클로저였지만 곧바로 소멸한다.
  // 외부로 나가서 따로 호출되는게 아니라, 선언 후 바로
	// 실행 + 소멸
  // 이러한 함수는 일반적으로 클로저라고 하지 않는다.
  function bar() {
    debugger;
    //상위 스코프의 식별자를 참조한다.
    console.log(x);
  }
  bar();
}

foo();

 

ex) 클로저인 것

function foo() {
  const x = 1;
  const y = 2;

  // 클로저의 예
  // 중첩 함수 bar는 외부 함수보다 더 오래 유지되며
  // 상위 스코프의 식별자를 참조한다.
  function bar() {
    debugger;
    console.log(x);
  }
  return bar;
}

const bar = foo();
bar();

 

 

오늘 클로저의 활용에 대해 공부하는데 클로저 자체에 대한 개념이 확실하지 않은 상태에서 하다 보니 또 받아들이기가 쉽지 않았다. 방금 클로저의 기본 개념에 대하여 하나씩 정리해 나가고 오늘 공부 내용을 다시 살펴보니 역시 훨씬 쉽게 이해가 된다. 추후 지속적으로 공부해 나가는데 도움이 될 수 있도록 기본 개념정리를 소홀히 하지 말아야겠다.