📒

Closure

closure

함수와 함수가 선언된 어휘적(lexical) 환경의 조합

자바스크립트는 함수가 호출되는 환경과 별개로, 기존에 선언되어 있던 환경 - 어휘적 환경 - 을 기준으로 변수를 조회한다.

간단히 말하면 외부 함수의 컨텍스트에 접근할 수 있는 내부 함수를 클로저라고 함!

함수 선언문으로 선언한 함수는 일반 변수와는 달리 바로 초기화가 된다.

외부함수의 실행이 종료된 후에도, 클로저 함수는 외부함수의 스코프, 즉, 함수가 선언된 어휘적 환경에 접근할 수 있습니다.

클로저 사용 예시: 클로저를 통해 커링(currying, 함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어 각각 인자를 받게 하는 방법), 클로저 모듈(변수를 외부 함수 스코프 안쪽에 감추어, 변수가 함수 밖에서 노출되는 것을 막는 방법)

특징

scope 함수는 두가지 특징을 만족해야한다.

함수를 리턴하는 함수

const adder = function (x) {
  return function (y) {
    return x + y;
  }
}
JavaScript
복사

리턴값이 함수의 형태이다.

내부 함수와 외부 함수

리턴하는 함수에 의해 스코프가 구분되므로 내부 함수는 외부 함수에 선언된 변수에 접근이 가능하다.

외부 함수는 안쪽 스코프에서 선언된 변수에 접근이 불가능하고 내부 함수에서는 바깥 스코프에서 선언된 변수에 접근이 가능하다

closure 함수의 장점

데이터를 보존하는 함수

외부함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있음

일반적인 함수는 함수 실행이 끝난 후 함수 내부의 변수를 사용할 수 없다 하지만 클로저 함수는 외부 함수의 실해이 끝나더라도 외부 함수 내 변수가 메모리 상에 저장된다.

이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있다

const adder = function (x) {
  return function (y) {
    return x + y;
  }
}

const add5 = adder(5);
add5(7); // 12
add5(10); // 15
JavaScript
복사

클로저 함수를 사용한 HTML 문자열 생성기 만들기

const tagMaker = tag => content => `<${tag}>${content}</${tag}>`

const divMaker = tagMaker('div');
divMaker('hello'); // '<div>hello</div>'

const anchorMaker = tagMaker('a');
anchorMaker('go'); // '<a>go</a>';
JavaScript
복사

정보의 접근 제한

const makeCounter = () => {
  let value = 0;

  return {
    increase: () => {
      value = value + 1
    },
    decrease: () => {
      value = value - 1
    },
    getValue: () => value
  }
}

const counter1 = makeCounter();
counter1 // {increase: f, decrease: f, getValue: f}
JavaScript
복사

클로저를 이용해 내부 함수를 객체에 담아서 여러 개의 내부 함수를 리턴하도록 만든다.

외부 스코프에서 내부 스코프의 변수에 접근할 수 없으므로 우리는 makeCounter를 바꾸지 않고 내부에 선언된 value에 새로운 값을 할당할 수 없다.

⇒ 이것을 캡슐화(정보의 접근 제한) 라고 한다.

side effect에 따른 오류로부터 데이터를 안전하게 보호할 수 있다.

클로저를 통해 불필요한 전역 변수 사용을 줄이고, 스코프를 이용해 값을 보다 안전하게 다룰 수 있다.

모듈화

함수 재사용성을 극대화하여 함수 하나를 완전히 독립적인 부품 형태로 분리

const counter1 = makeCounter()

const counter2 = makeCouter()
JavaScript
복사

두 counter는 독립적으로 돌아간다.

클로저는 모듈화에 유리하다.

closure 함수의 단점

자바스크립트는 가비지 컬렉션을 통해 메모리 관리를 합니다. 객체가 참조 대상이 아닐 때, 가비지 컬렉션에 의해 자동으로 메모리 할당이 해제됩니다. 일반 함수였다면 함수 실행 종료 후 가비지 컬렉션(참고 자료: MDN '자바스크립트의 메모리 관리') 대상이 되었을 객체가, 클로저 패턴에서는 메모리 상에 남아 있게 됩니다. 외부 함수 스코프가 내부함수에 의해 언제든지 참조될 수 있기 때문입니다. 따라서 클로저를 남발할 경우 퍼포먼스 저하가 발생할 수도 있습니다.

•

Strict Mode

•

즉시 실행 함수 표현식(IIFE)

•

변수 호이스팅과 TDZ(Temporal Dead Zone)

정의: 함수와 함수가 선언된 어휘적 환경(lexical environment)의 조합

* 특징: 내부 함수가 외부 함수 안에 선언된 변수에 접근할 수 있다. 내부 함수를 클로저 함수라고 부르기도 한다.

* 응용: namespacing, privacy, function factory, partially applied functions, ...

•

이를 활용하여 기존 함수가 여러 번 실행되면 결과가 변동되는 함수를, 한 번 리턴된 값만 리턴하게 하는 함수(_.once)와

* 기존 함수가 즉시 실행 되던 함수를, 일정 시간 이후에 실행되게 하는 함수(_.delay)로 만들어봅시다.

* 이는 일반적인 프로그래밍 디자인 패턴 중 데코레이터(또는 wrapper) 패턴과 유사합니다.

* 데코레이터 패턴은 객체를 꾸미거나(decorate) 감싸서(wrap) 기존 객체에 기능 또는 행동을 추가합니다.

* 자세한 내용은 아래 링크를 확인하시기 바랍니다. Advanced한 내용이므로 지금 당장 읽지 않으셔도 됩니다.

* 이론: https://refactoring.guru/design-patterns/decorator

* 구현: https://www.dofactory.com/javascript/design-patterns/decorator