[Javascript] 클로저

클로저 정의

클로저는 외부함수(포함하고있는)의 변수에 접근할 수 있는 내부함수를 일컫는다. 

간단한 예제를 통해서 이게 무슨말인지 쉽게 알아보자.

const x = 1;
function outer() {
	const x = 10;
    const inner = function() {
    	console.log(x);
        };
    return inner;
}

const ella = outer();
ella();  // 10

코드를 순차적으로 분석해본다.

1. 전역변수 x=1 이 선언된다.

2. 함수 outer는 outer스코프에 x=10과 inner함수를 가지고 있다.

3. inner함수는 inner스코프를 만들고 console.log(x)를 가지고 있다.

4. outer함수는 inner함수를 반환하고 소멸한다. (이때 실행컨텍스트에서 사라진다.)

5. ella라는 변수에 outer함수를 할당한다. 이 경우 반환된 inner함수가 들어갈 것이다.

6. ella()를 실행하면 inner함수가 실행되는 것이지만 이미 팝 되어 사라진 x=10을 반환한다.

 

이처럼 이미 사라진 outer 함수의 x=10을 참조하는 inner함수가 클로저이다.

 

https://www.youtube.com/watch?v=PVYjfrgZhtU&t=499s

실행컨텍스트 스택에는 이미 outer의 실행컨텍스트가 pop되어 사라졌지만 전역에 할당된 x가 inner함수객체를 참조하고, 이 inner함수는 outer렉시컬 환경을 바라보고 있기때문에 outer에 선언된 x=10을 참조하게 되는 것이다.

 

 

클로저의 활용

1. 정보은닉과 캡슐화

위의 경우 outer함수의 x=10에는 직접 접근할수 없고 오직 inner함수로만 접근이 가능한데 이 경우 공개할것과 공개하지 않을것을 정할수 있어서 정보의 은닉이 가능합니다.

 

클로저의 단점

콜백등으로 등록했던 함수들이 메모리에 계속해서 남아있다면 해당 closure도 같이 메모리에 남게된다. 따라서 지속적으로 루프를 돌면서 클로저를 생성하는 것은 메모리 소모가 크니 지양해야한다.

 

 

참고문언

http://clipsoft.co.kr/wp/blog/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%81%B4%EB%A1%9C%EC%A0%80closure/

자바스크립트 클로저(Closure) - CLIPSOFT

 

https://www.youtube.com/watch?v=PVYjfrgZhtU&t=499s