클로저 비용

- 클로저는 생성될 때마다 선언적 환경을 기억해야 하므로 추가적인 비용이 발생한다. 

/* 클로저와 그것에 따르는 비용을 확인하는 예제 */

// 일반적인 함수
const a = document.getElement('a')
function job() {
	const arr = Array.from({length: 10000000}, (_, i) => i+1)
    console.log(arr.length)
}
a.addEventListener('click', job)

// 클로저 함수
function jobWithClosure() {
	const arr = Array.from({length: 10000000}, (_, i) => i+1)
    return function() {
    	console.log(arr.length)
    }
}
const innerFunc = jobWithClosure()
b.addEventListener('click', function() {
	innerFunc()
})

 

- 두개의 함수를 개발자 도구에서 확인해보면 클로저를 활용하는 쪽이 압도적으로 부정적인 영향을 미친다.

- 클로저 jobWithClosure()로 분리해 실행하고 이를 onClick에 실행하는 방식인데 이미 스크립트를 실행하는 시점부터 아주 큰 배열을 메모리에 올려두고 시작하며, 클로저의 기본 원리에 따라서 클로저가 선언된 순간 내부 함수는 외부 함수의 선언적인 환경을 기억하고 있어야 하므로 이를 어디서 사용하는지의 여부와 상관 없이 저장해 놓는다.

- onClick 내부에서만 jobWithClosure()를 사용하고 있지만 이를 알 수 있는 방법이 없기 때문에 긴 배열을 저장해 두고 있으며, 일반 함수의 경우에는 클릭 시 스크립트 실행이 조금 길지만 클릭과 동시에 선언, 길이를 구하는 작업이 스코프 내부에서 끝났기 때문에 메모리 용량에 영향을 미치지 않는다.

- 외부 함수를 기억하고 이를 내부 함수에서 가져다 쓰는 메커니즘은 성능에 악영향을 미치며, 클로저에 꼭 필요한 작업만 남겨두지 않는다면 메모리를 불필요하게 사용하는 결과를 야기, 클로저 사용을 적절한 스코프에 선언하지 않는다면 성능에 악영향을 미침.