[Js] 자바스크립트의 클로저( Closure)

 

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

클로저 = 함수 + 함수를 둘러싼 환경(Lexical environment)

 

클로저(Closure)는 독립적인 변수를 가리키는 함수라고 MDN 웹 문서 사이트에서는 정의되어 있습니다.

자바스크립트의 함수 내부에 함수를 작성을 할 때 그 내부에 생성된 함수를 클로저(Closure)라고 합니다. 차후에 외부 함수의 변수를 사용 가능하도록 하기 위해서 반환하여 사용하는 것이 대부분입니다.

 

자바스크립트의 클로저에는 세 가지 스코프가 있습니다.

• 지역내의 지역 범위 (Local Scope)
• 지역외의 외부 함수 범위 (Outer Functions Scope)
• 전체지역의 전역 범위 (Global Scope)

클로저(Closure)에 대해서 세 가지 범위, 스코프에 모두 접근은 가능하지만. 중첩된 내부 함수가 있는 경우 종종 착각을 하는 경우가 있습니다.

function count() {

  // 자유변수
  var cnt = 0;

  // 클로저 함수
  function addCount() {
    cnt++;
    return cnt;
  }
  return addCount;
}

var increase = count();

console.log("1.count :: ", increase());
console.log("2.count :: ", increase());
console.log("3.count :: ", increase());

"1.count :: ", 1 
"2.count :: ", 2 
"3.count :: ", 3

 

클로저(Closure) 사용하는 목적

자바스크립트의 관계있는 변수와 기능을 하나의 함수로 묶어서 독립적으로 실행시킬 수 있다는 점에 있습니다. 자바스크립트 함수 내부에 데이터가 만들어지기 때문에 함수 외부에서 수정할 수 없도록 보호된 데이터를 생성이 가능합니다. (보호된 데이터를 만드는 것을 Private 데이터라고 합니다.)

 

클로저(Closure) 사용 시 유의사항

1. 하나의 클로저가 여러 함수 객체의 범위, 스코프 체인에 들어가 있는 경우 유의해야 합니다.

자바스크립트 반환되는 객체에 2개의 함수가 정의되어 있는데, 두 함수 모두 자유 변수를 참조하여 두 개의 함수를 호출 시 값이 변화되므로 이점에 유의해야 합니다.

function func(){
	var x= 1;
	return {
		func1 : function(){
			console.log(++x);
		},
		func2 : function(){
			console.log(-x);
		}
	};
};

var exam = func();
exam.func1();
exam.func2();

2 
-2

 

2. 클로저(Closure)의 property 값을 사용하기 가능하여 그 값이 여러 번 호출로 변할 수 있음을 유의해야 합니다.

function func(argNum){
	var num = argNum;
	return function(x){
		num += x;
		console.log("num :" + num);
	}
};

var exam = func();
exam(5);
exam(-10);

 

3. 반복문 안에서 클로저(Closure)를 활용할 때 주의해야 합니다.

function func(argNum){
	for(var i=1; i<=argNum; i++){
		(function(cur){
			setTimeout(function(){
				console.log(cur);
			}, cur *10);
		}(i));
	}
};
func(3);

1 
2 
3