Closure(클로저)
📌 Closure의 개념
- 클로저는 ‘함수’를 지칭하고 또 ‘그 함수가 선언된 환경과의 관계’의 개념이다.
- 클로저는 ‘자신이 선언될 당시의 환경을 기억하는 함수’이다.
- 클로저는 ‘내부함수가 외부함수의 context에 접근’할 수 있는 것을 가리킨다.
클로저란 함수와 함수가 선언된 어휘적 환경(lexical environment)의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.
(출처: MDN)
클로저를 배우기 전에 스코프에 대한 개념은 아래 링크에 정리해 두었다.
참고로 클로저는 JavaScript의 고유한 개념이 아닌, 여러 함수형 프로그래밍 언어에서 공통적으로 발견되는 특성이다. 따라서 다양한 문헌이나 웹사이트에서 조금씩 다른 방식으로 클로저를 정의하기도 한다.
📌 Closure의 특징
Closure의 사전적 의미는 폐쇄이다. 클로저의 핵심은 스코프를 이용하여 변수의 접근 범위를 ‘폐쇄’하는 것에 있다.
- 외부함수 스코프에서 내부함수 스코프로 접근 불가능하다.
- 내부함수에서는 외부함수 스코프에서 선언된 변수에 접근 기능하다. 따라서 내부 함수는 외부함수에 선언된 변수에 접근 가능하다.
외부함수의 실행이 종료된 후에도, 클로저 함수는 외부함수의 스코프, 즉, 함수가 선언된 어휘적 환경에 접근할 수 있다.
- 외부 함수 스코프가 내부함수에 의해 언제든지 참조될 수 있다. 따라서 클로저를 남발할 경우 퍼포먼스 저하가 발생할 수도 있다.
상위 스코프의 식별자를 포함하여 쓰여있는 내부 함수 코드 자체를 어휘적 환경(lexical environment)라고 부를 수 있다.
- 함수가 호출되는 환경과 별개로, 기존에 선언되어 있던 환경(어휘적 환경)을 기준으로 변수를 조회한다.
📌 Closure의 장점
-
전역변수 사용의 최소화
- 전역변수가 많으면 의도치 않게 어디에서든 접근하는 상황이 발생할 수 있다. 클로저를 이용하여 전역변수를 최소한으로 사용함으로써 이러한 실수나 예외적인 상황을 방지할 수 있다.
-
데이터 보존 가능
- 클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다. 따라서 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는
폐쇄성을 갖는다.
- 클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다. 따라서 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는
-
모듈화를 통한 코드 재사용에 편리
- 클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존 가능하다. 이와 같이 함수의 재사용성을 극대화하고 함수 하나를 독립적인 부품의 형태로 분리하는 것을
모듈화라고 한다. 클로저를 통해 데이터와 메소드를 묶어다닐 수 있기에 클로저는 모듈화에 유리하다.
- 클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존 가능하다. 이와 같이 함수의 재사용성을 극대화하고 함수 하나를 독립적인 부품의 형태로 분리하는 것을
-
정보의 접근 제한 (캡슐화)
클로저 모듈 패턴을 사용해 객체에 담아 여러 개의 함수를 리턴하도록 만들어 정보의 접근을 제한할 수 있는데, 이를캡슐화라고 한다.
📌 Closure 예시코드
중첩함수의 경우의 클로저
function outer() {
let message = 'Hello! ';
return function inner(name) { // inner함수는 클로저
return message = message + name;
}
}
let greeting = outer(); // 외부함수 호출. 변수 greeting은 inner 함수를 참조
console.log(greeting('Janet')); // Hello! Janet-
outer 함수는 종료됐지만, outer 함수 내부 변수인 message는 inner함수를 통해 접근 가능하다. 여기서의 inner함수가 바로 클로저이다.
-
이는 클로저의 특성으로 inner함수가 선언될 때 그 주변의 lexical environment(어휘적 환경) 즉, outer 함수의 lexical environment와 함께 묶였기 때문이다. 따라서 message라는 변수를 사용할 수 있게 된다.
Reference.
좋은 글 감사합니다. 자주 방문할게요 :)