[JavaScript] JS 클로저란? (closure)

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 

흔히 함수 내에서 함수를 정의하고 사용하면 클로저라고 한다.

클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효 범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.

 

👇 스코프 먼저 읽어보고 오기!

[JavaScript] 스코프(Scope)와 var, let, const 차이점

클로저는 주변의 상태 (lexical environment)의 참조와 함께 번들로 묶인 함수의 조합이다. 

 

즉, 클로저를 사용하면 내부 함수에서 외부 함수의 스코프에 접근을 가능하게 해 준다.

JavaScript에서는 함수가 생성될 때마다 클로저가 생성된다.

 

📌 클로저 함수의 장점 

1. 데이터를 보존할 수 있다.
클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다.
클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게 하는 폐쇄성을 갖는다.

2. 정보의 접근 제한 (캡슐화)
‘클로저 모듈 패턴’을 사용해 객체에 담아 여러 개의 함수를 리턴하도록 만든다.
이러한 정보의 접근을 제한하는 것을 캡슐화라고 한다.

3. 모듈화에 유리하다.
클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존할 수 있다.
이와 같이 함수의 재사용성을 극대화 함수 하나를 독립적인 부품의 형태로 분리하는 것을 모듈화라고 한다.
클로저를 통해 데이터와 메서드를 묶어 다닐 수 있기에 클로저는 모듈화에 유리하다.

 

📌 클로저 함수가 필요한 이유

1. 전역 변수를 줄일 수 있다.
전역 변수가 많으면 어디에서든 실수로라도 접근을 할 수 있기 때문에 최대한 전역 변수를 줄여서 코드를 짜야한다.
하지만 프로그램을 구현하다 보면 이 함수 하나에서만 사용하는데 전역 변수가 필요한 순간이 있다. 

이럴 때 클로저가 유용하게 사용된다.

예를 들어 클릭할 때마다 count를 세주는 함수가 있다고 생각해보자.

아래와 작성해 준다면 외부 함수(handleClick)의 lexical environment를 참조하는 함수를 btn의 콜백 함수로 이용해 전역 객체 없이 구현할 수 있다.

 

 

2. 비슷한 형태의 코드를 재사용률을 높일 수 있다.

코드를 보면 bold, itealic 등등의 새로운 태그를 만들 수 있는 함수 newTag를 클로져를 이용해 간단하게 구현했다.
인자에 open, close, content를 한 번에 다 받는다면, This is my content! 와 같은 값을 출력을 하고 싶을 때 가독성이 떨어질 수 있다. 하지만 클로져로 구현하면 코드의 가독성도 좋은 재사용하기 편한 코드를 구현할 수 있다.

 

📌 반복문 사용예시

간단하게 0-9까지의 정수를 출력하는 코드이지만 실제로 돌려보면 10만 열 번 출력되는 걸 볼 수 있다.

먼저 setTimeout()에 인자로 넘긴 익명함수는 모두 0.1초 뒤에 호출될 것이다. 그 0.1초 동안에 이미 반복문이 모두 순회되면서 i값은 이미 10이 된 상태. 그 때 익명함수가 호출되면서 이미 10이 되어버린 i를 참조하는 것이다.

이 경우에도 클로저를 사용하면 원하는 대로 동작하도록 만들 수 있다.

 

중간에 IIFE를 덧붙여 setTimeout()에 걸린 익명함수를 클로저로 만들었다. 앞서 말한대로 클로저는 만들어진 환경을 기억한다. 이 코드에서 i는 IIFE내에 j라는 형태로 주입되고, 클로저에 의해 각기 다른 환경속에 포함된다. 반복문은 10회 반복되므로 10개의 환경이 생길 것이고, 10개의 서로 다른 환경에 10개의 서로 다른 j가 생긴다.

 

 

 

클로저 - JavaScript | MDN

[JS]클로져(closure)와 클로져의 사용 예제

JavaScript 클로저(Closure)