클로저란? 원리와 사용이유

클로저란?

MDN에서는 클로저를 다음과 같이 정의하고 있다.

클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’.

---

클로저는 주변의 상태 (lexical environment)의 참조와 함께 번들로 묶인 함수의 조합입니다. 즉, 클로져는 우리에게 inner함수에서 outer함수의 스코프에 접근을 가능하게 해줍니다. 자바스크립트에서 클로저는 함수가 생성될 때마다 생성됩니다.

간단히 말하자면 함수가 선언될 때(실행X) 외부의 lexcial environment를 참조?하게 되는 현상?이다.

결론적으로 오직 하나의 메소드를 가지고 있는 객체를 일반적으로 사용하는 모든 곳에 클로저를 사용할 수 있다.

 

 함수 밖에서도 사용하기 위해서는 클로져를 사용하면 된다.

 

로저는 **자바스크립트의 고유한 개념이 아니라, 여러 함수형 프로그래밍 언어에서 공통적으로 발견되는 특성** 입니다. 그래서인지, 실제로 다양한 문헌과 여러 웹사이트에서 각기 다른 방식으로 클로저를 정의/설명하는 것을 살펴볼 수 있습니다. 때문에 ‘클로저’라는 개념을 학습하실 때, 순도? 100%의 정확한 정의를 찾아내려하기 보다는 현재 학습하고 계신 것과 같이 다양한 사례를 살피시고, 그것들을 토대로 이해하기 쉬운 나만의 정의를 내려보시는 것을 추천드립니다.

 

 

 

2. 클로저의 활용

클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억해야 하므로 메모리 차원에서 손해를 볼 수 있다. 하지만 클로저는 자바스크립트의 강력한 기능으로 이를 적극적으로 사용해야 한다. 

2.1 상태 유지

클로저가 가장 유용하게 사용되는 상황은 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것이다. 아래 예제를 살펴보자.

2.2 전역 변수의 사용 억제

버튼이 클릭될 때마다 클릭한 횟수가 누적되어 화면에 표시되는 카운터를 만들어보자. 이 예제의 클릭된 횟수가 바로 유지해야할 상태이다.

2.3 정보의 은닉

이번에는 생성자 함수 Counter를 생성하고 이를 통해 counter 객체를 만들어보자.

2.4 자주 발생하는 실수

아래의 예제는 클로저를 사용할 때 자주 발생할 수 있는 실수에 관련한 예제다.

 

 

https://poiemaweb.com/js-closure

 

https://hyunseob.github.io/2016/08/30/javascript-closure/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures