Dev/javascript

[자바스크립트] 클로저

Heybro 2018. 12. 3. 12:53

자바스크립트

클로저, closure


매번 공부를 해도 잘 모르는것 같고,

아는 것 같지만 막상 잘 활용하지 못하고 있는

자바스크립트의 핵심 기능 클로저를 알아보자.



"특정 함수가 참조하는 변수들이 선언된 렉시컬 스코프(유효범위)는 계속 유지되는데, 그 함수와 스코프를 묶어서 클로저라고 한다."

- 속 깊은 자바스크립트 (양성익)


함수 객체와, 함수의 변수가 해석되는 유효범위를 아울러 컴퓨터 과학 문헌에서는 클로저라고 일컽는다.

- 자바스크립트 완벽 가이드 (데이비드 플래너건)


이해가 되질 않는다....


클로저가 발생되는 기본적인 환경은 스코프 안에 스코프가 있을 때 이다.

즉, function안에 function이 선언 되어있을때 발생된다.


일반적으로 어떤 함수가 그 함수 내부에서 정의한 중첩 함수를 반환하는 것이다. 



1
2
3
4
5
6
7
8
9
10
11
12
13
var scope = "global scope";
 
function outer(){
    var scope = "local scope";
    function inner(){
        return scope;
    }
    return inner();
}
 
console.log(scope) //== "global scope"
console.log(outer()); // =="local scope"
console.log(inner()); // =="inner is not defined"
cs




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function counter(){
    var n=0;
    return {
        count:function(){
            return n++;
        },
        reset: function(){
            n=0;
        }
    }
}
 
var c = counter();
var d = counter();
console.log(c.count()); //0
console.log(c.count()); //1
console.log(d.count()); //0
console.log(d.count()); //1
console.log(d.count()); //2
 
console.log(c.reset()); //undefined
 
console.log(c.count()); //0 c를 리셋했기때문에 0부터 다시 시작.
console.log(c.count()); //1
console.log(d.count()); //3
console.log(d.count()); //4
console.log(d.count()); //5
cs



함수안의 로컬 변수의 값을

함수안의 내부함수가 조작하고

외부 함수 반환값으로 내부함수의 값을 return하여 

외부함수의 변수값을 참조할 수 있도록 하는 것.


클로저의 여러 예제 소스를 보다보면 이해가 갈 것이다.



자 그럼

클로저를 왜 사용할까?


라이브러리 또는 모듈에서 변수를 보호하는 기능이 있다.

즉, 자바스크립트에는 캡슐화 private의 개념이 없지만,

클로저를 사용하면 캡슐화와 비슷한 기능을 할 수 있게 된다.

그리고 static이 가능해 진다. 



또 최근 코딩스타일이 그러하다.

자바스크립트 진영의 개발 추세가 글로별 변수를 사용하지 않는 방향으로 가고 있다.

그래서 클로저를 사용하여, 글로벌변수 선언을 줄이도록 하는 추세이다.



클로저를 활용하기 좋은 상황은

"반복적으로 같은 작업을 할때, 같은 초기화 작업이 지속적으로 필요할 때, 콜백 함수에 동적인 데이터를 넘겨주고 싶을 때"



클로저의 단점

 - 메모리를 사용한다. 메모리 누수에 주의해야한다.

 - 스코프 생성과 이후 변수 조회에 따른 퍼포먼스 손해가 있다.

아무때나 남발해서 사용하기보다 정말 필요한 곳에 선택하여 사용해야 한다.


또 코드를 작성한 개발자 본인이 사용할 때는 이해할 수 있고 핵심적이지만,

다른 개발자가 보면 어떠한 목적으로 클로저를 생성하고, 어디에서 생성되었는지 불분명할 때가 많다.

따라서 협업시 명확한 주석과 문서화가 필요하다.


그리고 익숙하지 않으면 이해하기 어렵다. 처음 접하는 개발자는 클로저가 돌아가는 방식을 이해하고 공부하는 시간이 필요하다.


개발언어를 공부할 때, 그 언어의 특징과 핵심 기능을 알고 습득해야한다.

클로저는 자바스크립트만의 특별한 기능이다.

따라서 자바스크립트를 사용하는 개발자는 

클로저를 꼭 정복 해야 한다.


알쏭달쏭 클로저 한번보고 다시보고, 또보다 보면 이해하는 날이 올 것이다.


-참고

[속 깊은 자바스크립트] - 양성익지음, 루비페이퍼

[자바스크립트 완벽 가이드] - 데이비드 플래너건, O,REILLY

반응형