클로져
- 한마디로 함수 내부의 함수에서 바깥 함수의 변수를 참조하고 있으면 바깥 함수의 호출이 끝나고 그 변수가 살아있는 것이다.
- 즉 바깥변수의 값이 지속되기 때문에 이 값을 이용해서 무언가를 할 수 있다.
- 말은 어려우니 코드로 알아보자
클릭할때마다 버튼에 클릭횟수가 표시
<body>
<button id="btn">버튼 클릭 횟수:0</button>
<script>
document.getElementById('btn').addEventListener('click', function (e){
var targetText = e.target.innerText;
var num = parseInt(targetText.replace(/버튼 클릭 횟수\:/, ''));
console.log(num, targetText)
return (function() {
var cnt = 0 + num;
++cnt;
e.target.innerText = '버튼 클릭 횟수:' + cnt; // cnt는 외부함수 num을 사용하기 때문에 클로져가 사용되어서 클릭할때마다 클릭전의 숫자를 이어받아 증가시킬수가 있는 것이다.
})();
});
</script>
</body>
시간을 매개변수로 받아는 스톱워치
<body>
<p id="p">0</p>
<script>
function timer(till) {
var p = document.getElementById('p')
var sec = parseInt(p.innerText);
var intervalID = setInterval(function(){
sec++;
p.innerText = sec;
if(sec >= till) clearInterval(intervalID)// intervalID은 외부 함수에서 호출한 setInterval이 리턴한 고유한 아이디가 담겨있는데, sec이 계속 증가된 값이 매개변수 시간을 초과하면 리턴한 아이디를 이용하여서 반복을 clear한다.
}, 1000);
}
timer(3);
</script>
</body>