<Javascript> 11. Closer

Javascript Closer

1. 클로저란

• 변수의 유효 범위를 확장하는 기능이다.
• 간단하게 외부에서 계속 필요로 하는 지역변수를 파괴하지 않고 남겨두는 것이다.

1.1 예시

function f(){
    let k=10;
  }
  f();
  console.log(k);

• 위의 실행결과는 k는 정의되지 않은 함수가 나온다.
• 그 이유는 k의 스코프는 함수 f내에 있기 때문이다.

function f(){
  let k = 10;
  function inner(){
    k = 5;
    console.log(k);
  }
  return inner;
}
f(); // 1
var clr= f();
clr(); // 2

• 1번은 실행 되지 않는다. 왜냐하면 inner함수는 f함수에 속해 있기때문에 return 하면 이미 f함수는 종료되기 떄문이다.
• 하지만 2번은 5라는 결과가 출력된다. 이것이 클로저 이고 함수가 동작하기 위해 필요한 지역변수를 포괄한 환경을 유지 한다.
• 클로저는 함수 자체를 가르키는 것이 아닌 유지해야하는 실행환경 을 의미한다.
• 여기서 k는 f()가 아닌 f()의 클로저에 소속되는 것이다.

2. 사용하는 곳

• 하나의 예로 이벤트 핸들러를 등록할때 지역변수를 자유롭게 참조할 수 있어야한다.
• 아래의 변수 k를 setInterval 내부에 선언하면 초기화되므로 카운트가 되지 않는다. 전역변수로 쓸수 있으나 좋은 방법이 아니다.
• 클로저를 사용하면 지역변수의 라이프사이클을 전역변수처럼 사용할 수 있게 된다.
• 아래처럼 두개의 f()은 독립적으로 작동하기 때문에 클로저는 재사용성이 좋다.

function f(){
  let k = 0;
  setInterval(function(){
    k++;
    console.log(k);
  },1000);
}
f();
f();

3. 참고

• 렉시컬환경 이란 함수 또는 블록의 유효범위 안에 있는 식별자와 결과값이 저장되는 곳 을 말한다.
• 이는 환경레코드(값이 바인드 되는 공간)과 외부 렉시컬환경 참조(포인터 같은 역할)로 이루어져있다.
• 예로 f함수 안에 g함수가 있으때 클로저는 f함수의 렉시컬환경과 전역 렉시컬환경 컴포넌트가 클로저가 된다.
• f의 렉시컬환경 안에는 함수g의 식별자와 포인터가 있으며 클로저 안에 함수 g의 함수객체가 존재한다.
• f함수가 호출되어 함수 g가 실행되는 시점에 생성된다. 즉 클로저는 함수객체(g)와 렉시컬 환경컴포넌트의 집합 이다.
• 함수 g의 함수 객체가 있는 한 클로저는 메모리에서 지워지지 않는다.(실행이 끝나도 참조하고 있으면 지워지지않는다.)
• 리터럴로 선언하면 객체 형태로도 사용할 수 있다.

var a = 1;
function f(){
  var b = 2;
  function g(){
    var c = 3;
    console.log(a+b+c);
  }
  g();
}

출처

• JavaScript+jQuery 정복 : 보고, 이해하고, 바로 쓰는 자바스크립트 공략집
• ES6로 배우는 모던 자바스크립트 입문