[JavaScript] - 클로저(Closure)

● 클로저

클로저란 내부함수가 외부함수의 컨텐스트에 접근할 수 있는 것을 가르킨다.

- 쉽게 설명하면 함수 내에서 함수를 정의하고 사용하면 클로저라고 한다.

- 클로저는 외부함수의 지역변수, 인자 등을 외부함수가 종료된 이후에도 사용이 가능한다. 이러한 변수를 자유변수라고 한다.

 

소스코드로 살펴보면 다음과 같다.

 

	function closure() {
	var x = '클로저'
	return function() {
	return x
	}
	}
	var test = closure()
	console.log(test())

view raw 클로저.js hosted with ❤ by GitHub

클로저

 위 코드를 살펴보면 closure() 는 함수를 반환하고, 반환된 함수는 closure() 내부에서 선언된 변수를 참조하고 있다. 이렇게 참조된 변수는 함수 실행이 끝나도 사라지지 않고 여전히 옳바른 값을 반환하는 것을 알 수 있다.

 

● 클로저를 통한 은닉화

 클로저를 사용하면 외부에서 변수에 직접 접근하는 것을 제한할 수 있다. 즉 변수를 객체지향의 private 처럼 사용할 수 있다.

 

	function closure(name) {
	return {
	getName: function () {
	return name
	},
	setName: function (_name) {
	name = _name
	}
	}
	}
	var test1 = closure('Jay')
	var test2 = closure('Roy')
	console.log(test1.getName())
	console.log(test2.getName())
	test1.setName('Micky')
	console.log(test1.getName())

view raw 클로저 은닉화.js hosted with ❤ by GitHub

Jay
Roy
Micky

 

 ● 클로저를 통한 반복문

 

	var test = []
	for (var i = 0; i < 3; i++) {
	test[i] = function () {
	return i
	}
	}
	for (var index in test) {
	console.log(test[index]())
	}

view raw 클로저 반복문.js hosted with ❤ by GitHub

3
3
3

출력을 하는 시점에서 i의 값은 5이기 때문에 0 1 2 가 아니라 3만 출력이 된다.

 

● 클로저의 성능

 클로저는 각각의 자유변수를 계속 참조하기때문에 메모리가 소모된다. 따라서 클로저 사용이 끝나면 참조를 제거해야한다.

 

	function closure(name) {
	return {
	getName: function () {
	return name
	},
	setName: function (_name) {
	name = _name
	}
	}
	}
	var test1 = closure('Jay')
	var test2 = closure('Roy')
	console.log(test1.getName())
	console.log(test2.getName())
	test1.setName('Micky')
	console.log(test1.getName())
	test1 = null
	test2 = null

view raw 클로저 메모리.js hosted with ❤ by GitHub