js - 클로저

 

클로저 (closure)

 

클로저(closure)는 자바스크립트에서 중요한 개념 중 하나로 MDN 공식문서를 참고하면 아래와 같이 설명하고 있다.

 

"함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다."

 

물론 클로저는 자바스크립트만의  고유의 개념은 아니고 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(Functional Programming language: 얼랭(Erlnag), 스칼라(Scala), 하스켈(Haskell), 리스프(Lisp)…)에서 사용되는 중요한 특성이다.

 

 

 

 

 

클로저를 이해하기 앞서서 

 

"함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다"

 

이 말만 가지고는 클로저가 무었인지 잘 이해되지 않는다 그래서 아래 코드를 보면서 이해해 보자.

funtion outer ()
{
    let values = 0;
    return inner()
    {
    	values += 25;	
    }
}

outer();

 

함수 outer 내에서 내부함수 inner가 선언되고 호출되었다. 이때 내부함수 inner는 자신을 포함하고 있는 외부함수 outer의 변수 values에 접근할 수 있다. 이는 함수 inner가 함수 outer의 내부에 선언되었기 때문이다.

 

 

funtion outer ()
{
    let values = 0;
    return inner()
    {
    	return values += 25;	
    }
}


let inners =  outer();
console.log(inners());  // 25 

 

그런데 만약 위와 같은 방법으로 사용하게 되면 outer()함수는 inners 변수에 inner()함수를 반환하고  life-cycle 종료었다. 그런데 inners()를 호출하게 되면 outer()함수가 이미 life-cycle이 종료되어 실행 컨텍스트 스택에서 제거된 함수의 지역변수 values가 다시 부활이라도 한 듯이 동작하고 있다.

 

이러한 상황 외부함수보다 내부함수가 더 오래 유지되는 경우, 외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역 변수에 접근할 수 있는데 이러한 함수를 클로저(Closure)라고 부른다.

 

즉 외부함수가 이미 반환되었어도 외부함수 내의 변수는 이를 필요로 하는 내부함수가 하나 이상 존재하는 경우 계속 유지된다. 이때 내부함수가 외부함수에 있는 변수의 복사본이 아니라 실제 변수에 접근한다는 것에 주의하여야 한다.

 

 

 

 

 

 

 

 

- 단점 

 

클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억해야 하므로 메모리 차원에서 손해를 볼 수 있다. 

가비지 컬랙터는 모든 참조가 없어저야 메모리에서 삭제하기 때문에 크로저 상태에서는 해당 메모리를 지속적으로 사용하고 있는 상태가 된다. 

 

 

 

 

- 참조

https://poiemaweb.com/js-closure

Closure | PoiemaWeb