클로저

클로저란 렉시컬 스코프의 변수를 함수가 사용하고 있는 상태를 가리킵니다. 일러스트에서 확인합시다.

JS

function fn1() {
  let b =1;
  function fn2() {
    console.log(b);
  }
  fn2();
}
fn1();

이와 같이 함수가 다계층으로 정의되고 있을 때, 함수 fn2가 그 렉시컬 스코프인 변수 b를 참조하고 있습니다. 이 상태를 클로저로 표현합니다. 이 클로저를 이용한 실장 케이스도 확인합시다.

개인 변수 정의

우선 invrement 함수라고 하는 것을 준비해, 이 함수가 불려졌을 때에 카운트를 하나씩 가산하는 구조를 만들어 봅시다.

JS

let num = 0;

increment();
increment();
increment();

function increment() {
  num = num +1;
  console.log(num);
}

이제 1,2,3으로 출력할 수 있습니다. 다만 이대로는 num이 소스 코드의 어디에서라도 재기록할 수 있어 버립니다. 예를 들면 다음과 같이 어딘가에서 num의 값을 초기화해 버렸을 경우(기입) 출력되는 값이 쓰여져 기대한 거동을 취할 수 없는 경우가 있습니다.

JS

let num = 0;

increment();
increment();
increment();

function increment() {
  num = num +1;
  console.log(num);
}

num = 0;
increment();

그래서 클로저를 사용해 함수의 내부에는 변수를 가지면서도 외부로부터는 액세스 할 수 없게 합시다.

먼저 increment라는 함수를 incrementFactory로 다시 씁니다. 이 incrementFactory내에 num의 초기화, 및increment 함수를 기술해, incrementFactory의 반환값으로서increment 함수를 설정합니다. 이와 같이 JavaScript에서는 함수도 반환값으로 설정할 수 있습니다.

JS

function incrementFactory() {
  let num = 0;

  function increment() {
    num = num +1;
    console.log(num);
  }
  return increment
}

const increment = incrementFactory();
increment();

마지막으로 반환 값을 increment라는 변수에 저장하고 실행합니다. 이 때 incrementFactory 안에서 함수increment 안에서 사용하고 있기 때문에, 함수increment는 num에의 참조를 보관 유지하고 있는 상태에서 incrementFactory로부터 반환하게 됩니다. 덧붙여서 함수의 실행은 함수명의 뒤에 ()를 붙입니다.

동적 함수 생성

정적인 함수와의 차이는 함수를 생성하는 함수에 인수를 설정해, 호출시에 참조하는 값을 설정할 수 있는 점이 됩니다.

JS

function addNumberFactory(num) {
  function addNumber(val) {
    return num + val;
  }
  return addNumber;
}

const add5 = addNumberFactory(5);
const result = add5(10);
console.log(result);

addNumberFactory (num)의 인수인 num에의 참조를 호출 시점에서 보관 유지합니다.

참고

Udemy: 【JS】가치에서 배우고 싶은 사람을 위한 JavaScript 메커니즘