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

 

클로저(Closure)

클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다. 어휘적 환경은 쉽게 말해서 함수를 둘러싼 환경이라고 할 수 있습니다. 필연적으로 이것을 둘러싼 함수가 있고 그 둘러싼 함수를 호출하면서 클로저를 사용할 수 있습니다.

 

기본적으로 함수레벨의 스코프에서는 외부 스코프에 선언된 변수(전역변수)를 내부 스코프에서 접근할 수 있지만 내부 스코프에 선언된 변수(지역변수)를 외부 스코프에서 접근할 수 없습니다.

 

하지만 클로저를 사용한다면 간접적으로 내부 스코프에 선언된 변수를 외부 스코프에서 접근할 수 있습니다. 내부 스코프의 지역변수를 숨겨진 전역변수처럼 사용할 수 있습니다.

 

function some() {
	var name = 'jh';
	return function() {
		return name;
	}
}
var closure = some();

// 클로저를 통해서 name 변수에 간접적으로 접근가능 ✅
console.log( closure() ); // 'jh' 출력

 

closure 변수가 클로저이고, some 함수에서 리턴되는 함수만 가리키는 것이 뿐만 아니라 함수가 선언된 name 변수가 있는 스코프 또한 포함하고 있습니다. 그렇기 때문에 closure 를 통해서 내부 스코프에 있는 name 에 접근할 수 있습니다.

 

function counter() {
	var n = 0;
	return function() {
		n = n + 1;
		console.log( n );
	}
}

var counterClosure = counter();

counterClosure(); // '1' 출력
counterClosure(); // '2' 출력
counterClosure(); // '3' 출력

 

counter 함수 안에 있는 n 변수는 전역변수는 아니지만 counterClosure 클로저를 통해서 숨겨진 전역변수처럼 사용할 수 있습니다.

 

var counterClosure = (n => ( () => console.log( ++n) ) )(0);

counterClosure(); // '1' 출력
counterClosure(); // '2' 출력
counterClosure(); // '3' 출력

 

익명함수 대신에 화살표 함수를 사용해서 좀더 단순한 형태로 구현해 보았습니다.