클로저
함수가 선언될 때의 유효범위 (렉시컬 범위)를 기억하고 있다가, 함수가 외부에서 호출될 때 그 유효범위의 특정 변수를 참조할수 있는 개념을 말합니다.
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
</body>
<script>
const h1El = document.querySelector('h1')
const h2El = document.querySelector('h2')
let h1IsRed = false;
let h2IsRed = false;
h1El.addEventListener('click',event => {
h1IsRed = !h1IsRed;
h1El.style.color = h1IsRed ? 'red' : 'black'
})
h2El.addEventListener('click',event => {
h2IsRed = !h2IsRed;
hEl.style.color = h1IsRed ? 'red' : 'black'
})
</script>이 코드를 간결하게 줄이면
const h1El = document.querySelector('h1')
const h2El = document.querySelector('h2')
function createToggleHandler(){
let isRed = false;
return event => {
isRed = !isRed;
event.target.style.color = isRed? 'red' : 'black'
}
}
h1El.addEventListener('click',createToggleHandler())
개발자가 되고 싶어요