클로저(Closure)

오늘은 Closure 라는 개념에 대해 알아보려고 한다. 

일단 우리의 친구 mdn에 나온 클로저의 정의는 다음과 같다. 

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

언제나와 같이 참 불친절하고 무슨 말을 하는지 모르겠다. 

아래에서 좀 더 자세히 알아보도록 하자. 

 

일반적인 함수를 생각해본다면, 일반적인 함수들은, 호출이 일어나기전이거나 호출이 일어난 이후, 해당 함수안에 들어 있는 컨텍스트에 접근하는것이 불가하다. 

하지만 클로저, 클로저 함수는 외부함수의 컨텍스트(context)에 내부함수를 통해 접근이 가능하며, 이러한 상황일때 이 내부함수가 클로저함수가 된다. 

const add = x => y=> x+y; (함수를 두번 호출하는 클로저함수의 기본적인 형태)

여기에서 외부함수를 통해서는 내부함수의 변수 y에 접근이 불가하지만, 내부함수를 통해서는 외부함수의 변수 x에 접근이 가능하다. 이러한 내부함수를 y라고 하는 것이다. 

얼핏 보면 당연한 개념인데, 왜 이러한 개념이 이것이 중요하고 특이한 것일까?

우선, 이 클로저라는 것은 데이터가 저장이 가능한 형태라는 것이다. 

예로써, 해당사항에 대해 알아보자. 

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

    return {                    //익명 객체를 리턴. 해당 객체는 increase, decrease, seeValue라는 함수를 값으로 가지고 있음.
       increase: ()=>{value = value +1;},
      decrease: () =>{value = value -1;}
      seeValue: () =>value
    }
}

const counter1 = doCounter()     //  counter1 = { increase:f, decrease:f, seeValue:f}

 counter1.increase(); 

counter1.seeValue(); 를 하게 되면, 함수 밖에서는 볼수 없던 (접근이 불가하던)value값인 1에 접근이 가능하게 된다.