프론트엔드 면접질문 1순위 클로저에 대하여 코드와 함께 알아 보겠습니다.
클로저란 외부 함수 안에 선언되어있는 내부함수가 반환될때 선언되었던 렉시컬스코프를 기억하여 외부함수의 생명주기가 종료되어도 해당환경의 변수에 접근할수 있는것을 말합니다.
function 클로저카운터(initialValue=0){
let count = initialValue;
return function(){
count++
console.log(count)
}
}
const 카운트증가 = 클로저카운터()
function clickHandler(){
카운트증가()
}
document.querySelector('button').addEventListener('click',clickHandler)버튼을 누를때마다 카운트가 증가하는 코드입니다. 클로저카운터 라는 함수는 익명함수를 반환하고있습니다. 익명함수는 호출시 count를 증가시키고 콘솔에 count를 표시합니다.
버튼을 누를때마다 콘솔로그에 값이 증가하는것을 확인할 수 있습니다.
클로저를 사용함으써 변수를 은닉하였습니다.
위의 코드를 실행해보면 마치 리액트의 훅과 비슷하다는 느낌을 받으실겁니다! 왜냐하면 리액트도 클로저기반으로 동작을 하는것이기 떄문이죠.
클로저 함수의 단점은 일반함수는 가비지컬렉션에의해 생명주기가 종려되면 메모리가 반환되지만 클로저는 생명주기가 종료된 함수에서의 식별자를 계속 참조하고 있기때문에 자동적으로 메모리 해제가 되지가 않는다는점입니다.
