클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다.
쉽게말해 외부함수의 변수에 접근할 수 있는 내부함수를 일컫습니다. 이는 스코프 체인으로 표현되기도 합니다.스코프(Scope)란?
Scope를 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있습니다. 즉, 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’입니다.
정보의 은닉
클로저의 핵심은 스코프를 이용해서, 변수의 접근 범위를 닫는(폐쇄) 것에 있다.
내부함수에서는 외부함수 스코프에 선언된 변수에 접근이 기능하지만, 외부함수 스코프에서 내부함수 스코프로 접근이 불가능하다. 따라서 바깥에서 쉽게 바뀌면 안 되는 값을 내부함수에 넣어 사용하면 정보를 은닉할 수 있다.
전역변수 사용 억제
전역변수는 예상치 못한 Side Effect를 일으킬 수 있기에 최대한 줄이는 것이 좋다.
하지만 프로그램 구현 시 함수 하나에 사용하는 전역변수가 필요한 순간이 있다. 이럴 때 클로저가 유용하게 사용된다.
// Counter 예제
const btn = document.querySelector('button')
btn.addEventListener('click',handleClick)
let count = 0
function handleCilck(){
count++
return count
}
//위와 같은 경우에 count를 전역변수로 사용해줘야 count가 증가를 해줄 수 있음
//이럴경우 클로져를 사용해서 해결할 수 있다.
// Counter Closure 예제
const btn = document.querySelector('button')
btn.addEventListener('click',handleClick())
function handleCilck(){
let count = 0
return function (){
count++
return count
}
}
// 위와 같이 작성해 준다면 외부함수(handleClick)의 lexical environment를 참조하는 함수를
// btn의 콜백함수로 이용해 전역객체 없이 구현할 수 있다.