최근 자바스크립트를 다시 공부해보기 시작했다..
그러다가 다시 한번 예전에 공부했던 클로저를 접하게 되었다. 다시 한번 공부 해보자
(내가 이해하고 생각하여 글을 적는것이다.. 틀린 부분이 있을수도 있다...)
자바스크립트의 특징중 하나는 함수 안에 함수를 중첩으로 가질수 있다.
그리고 객체지향 관점에서 본다면 자바스크립트에서는 함수 또한 객체로 취급하기도 한다.
함수 안에 프로퍼티나, 메소드를 가질수 있기 때문이다.
자바스크립트의 매우 큰 특징 중 하나인 클로저는
이러한 함수의 특징을 이용하는 방법중 하나다.
*이해하기 쉬우라고 자식, 부모 키워드 쓰는거일뿐 상속 뭐 이런거랑은 틀리니 오해 하지 마시길.
클로저란 특정한 함수에서 자신(자식 함수..? 라고 할까..?) 을 감싸고 있는 함수(부모함수 라고 하면 될려나...?)의 변수나, 중첩함수등을 그대로 활용할수 있게 만들어주는 함수다.
즉 클로저라는 것은 그 자체로 함수이며 위에 설명과 같은 특징을 가지게 된다.
우선 그냥 평범한 함수를 예로 들어 보자
function add() {
var counter = 0;
counter += 1;
}
이라는 함수가 있고 add() 함수를 세번 호출한다고 생각해보자.
그럼 counter의 값은 얼마가 되어 있을까?
이경우엔 몇번을 호출하든 counter의 값은 1이상 증가하지 않는다
호출한후 새로운 지역 변수 counter를 0으로 초기화한후 1을 증가시키고 끝나기 떄문이다.
여기서 생각해야 될껀 값도 값이지만 함수는 독립적으로 실행되고 실행 후에는 선언된 변수들은 함수의 역할이 끝나면 모두 사라진다.
하지만 우리가 코딩을 하면서 함수안에 선해 놓은 어떠한 변수를 함수가 끝난 후에도 계속해서 사용하게 하고 싶다면 어떻게 해야 할까
보통은 해당 변수를 전역으로 선언하는 방식을 생각할수 있을 것이다.
하지만 자바 스크립트에서는 위에서 설명한 특징으로 인해 좀더 응집력 있게 클로저로 이러한 방식을 만들어 낼수 있다.
var add = (function add() {
var counter =0;
return function () { return counter += 1;}
})();
add();
add();
add();
위에 소스가 바로 클로저를 이용한 함수이다. 이 경우엔 정상적으로 counter의 값이 3까지 증가를 하게 된다.
앞서 설명한 특징처럼 add라는 함수가 function() 함수를 감싸고 있다. add 함수 안에는 counter라는 지역변수가 선언되어 있고 return 값으로 function() 자체를 넘겨 주고 있으며 function() 내용은 counter의 값을 1 증가 시킨다.
이렇게 사용함으로써 지역변수지만 그 값을 계속해서 보존해서 사용할수 있게 된다.
클로저라는게 재대로 이해하기 힘들수도 있지만 저런 특징을 자바스크립트에서 가지고 있고 사용할수 있구나 라는 정도로 알고 있으면 될듯 하다.
그렇다면 클로저를 왜 사용해야 하는가.
자바스크립트의 변수들은 기본적으로 public으로 되어있는데 객체 지향중에서 지향하는 캡슐화의 형태로 만들려면 클로저를 사용하면 구현 가능하다.
외부에서 counter라는 변수에 접근할수 없지만 내부에선 접근이 가능하기 때문이다.
게다가 딴 지역에서 counter라는 변수를 선언한들 add 함수 안에 있는 counter랑은 별개의 변수이므로 겹칠 위험도 없다.
간단히 정리하면
전역변수의 오용이 없는 깔끔한 스크립트의 작성
보다 자바스크립트에 적합한 방식의 스크립트 구성
다양한 자바스크립트의 디자인 패턴의 적용
등으로 생각을 하고 있다면 자바스크립트에서 클로저를 사용하면 좋다.
'JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트 주의사항 2 (0) | 2013.10.05 |
|---|---|
| 자바스크립트의 캡슐화 (0) | 2012.12.31 |
| 클로저에 대한 정리 (0) | 2012.12.27 |
| 자바스크립트 변수 유효 범위 (0) | 2012.08.09 |
| 자바스크립트 주의사항 (0) | 2012.08.03 |
dom_korean.zip
142가지의 자바스크립트 소스.txt
