• 주변 상황을 기억한다.
  • 인자로서 전달도 가능하며, 값으로서 반환 또한 가능하다.
  • 자바스크립트 함수는 일급 객체의 요건을 모두 충족한다.
  • 함수가 실행되어 내부에 존재하는 함수를 외부로 반환할 경우 클로저가 생성되며, 반환된 함수는 클로저 영역을 참조할 수 있다.
  • 이 때 반환된 함수를 클로저 함수라 명한다.

Closure

<ul id="demo-nav">
	<li><a href="">home</a></li>
	<li><a href="">about</a></li>
	<li><a href="">portfolio</a></li>
	<li><a href="">contact</a></li>
</ul>

A. Closuer

  • [단점] ‘linkClick’ 변수를 하나 더 생성해야 한다.
  • IIFE 패턴을 사용하여 ‘B’코드로 리팩토링.
var i=0, l=demo_nav_links.length; 
var linkClick = function(i) {
		return function() {
			console.log(i); // for문이 돌때 'i'값을 참조한다
			return false;  // 링크를 클릭했을 때 브라우저의 기본 동작을 차단
		}
};

for(; i<l; i++) {
	var link = demo_nav_links[i];
	// console.log('link'+i+':', link);
	link.onclick = linkClick(i); // 함수가 바로 실행 되어 값이 0,1,2,3 출력이 된다.
}

B. IIFE + Closuer

  • IIFE (즉시 실행 함수) 패턴을 사용하여 Closuer 함수 구현/활용
var i=0, l=demo_nav_links.length; 
for(; i<l; i++) {
	var link = demo_nav_links[i];
	link.onclick = ( function(idx) {
		return function(i){
			console.log(idx);
			return false;
		};
	}(i));
}