🍁Closure
클로저(Closure)는 고유한 개념이 아니라, 함수형 프로그래밍 언어에서 발견되는 특성(기술)이다.
클로저는 함수 내부에 정의된 함수가 외부 함수에 접근할 수 있는 방법을 제공하며, 이를 통해 함수는 자신이 생성된 위치의 스코프에 있는 변수들에 접근하고 수정할 수 있게 한다.
지역 함수 선언
function outer() {
//지역 변수(outer)
let a = 10;
console.log('a', a);
//지역 함수(outer)
function inner() {
//지역 변수(inner)
let b = 20;
console.log('b', b);
}
inner();
//console.log('b', b);
}
outer();
//inner();
//console.log('a', a);함수 안에 지역 변수를 만드는 것처럼 지역 함수를 만들 수 있다.
지역 함수를 만드는 이유는 함수 내에서만 사용할 수 있게 하기 위해서이다.
클로저의 실행
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
let num1 = 100; //전역 변수
btn1.onclick = function() {
let num2 = 200; //지역 변수(btn1.onclick)
//조건부 이벤트
btn2.onclick = function() {
alert(num1); //전역 변수 접근
alert(num2); //지역 변수 접근
};
};
num2의 생명주기를 생각하면 위 코드는 말이 안 되는 문법이다.
전역 변수는 페이지가 꺼지기 전까지 살아 있고, 지역 변수는 해당 범위가 끝나기 전까지 살아있다. 그렇다면 지역 변수 num2는 클릭하자마자 죽어야 하는데, num2에 들어 있는 200이 출력된다.
사용자가 btn2 버튼을 언제 누를지 예측할 수 없기 때문에 나중에 일어날 btn2.onclick 함수 안에서 num2를 사용하면 not defined로 떠야 하고, 실제로도 num2는 죽는다. 그럼에도 num2가 좀비처럼 되살아나는 이유는 클로저 현상 때문이다!🧟
클로저의 역할
클로저는 외부 함수의 지역 변수를 내부 함수에서 사용할 때 발생한다. 시간차에 따라 외부 지역 변수가 소멸 후 내부 함수의 호출이 발생할 때 클로저가 실행된다.
클로저는 외부 함수의 지역 변수를 나중에 사용하기 위해서 별도의 메모리 공간에 저장하기 때문에 소멸된 변수를 호출할 수 있게 된다.
결과적으로 클로저 덕분에 바깥쪽의 지역 자원을 안쪽에서 사용할 수 있게 된다.
