클로저... 내가 아는 클로저는 2016년에 나온 The Chainsmokers의 Closer와 LCK 미드라이너 Clozer 선수, 야구에서 마무리 투수를 의미하는 클로저밖에 몰랐지만 이번에 또 하나 추가로 알게 됐다. 말 나온 김에 closer 한 번 들어야겠다...
Closure
closure는 폐쇄라는 의미를 가지고 있다. 이 뜻이 도대체 무슨 관련이 있을까? 위키백과에는 '컴퓨터 언어에서 클로저는 일급 객체 함수의 개념을 이용하여 스코프에 묶인 변수를 바인딩 하기 위한 일종의 기술이다.' 라고 나와있다. 말이 너무 어렵다... 조금 더 풀어서 알아보자.
클로저는 함수가 선언될 때의 유효 범위(렉시컬 범위)를 기억하고 있다가, 외부에서 호출될 때 그 유효범위의 특정 변수를 참조할 수 있는 개념이다. 저번에 메모리 누수 관련된 게시글에서도 잠시 언급되었는데, 이를 잘못 쓰면 메모리 누수가 일어날 수 있으니 주의해서 사용하자.
클로저를 사용하면 상태 관리를 해줘야 하는 부분이 줄어든다. 이 점에 착안해 잘 사용하면 좋은 친구일 거 같다! (물론 어렵겠지만... 친해져 보도록 하자...)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<script>
function createCount() {
let a = 0;
return function () {
return a+= 1;
}
}
const count1 = createCount();
console.log(count1()); // 1
console.log(count1()); // 2
console.log(count1()); // 3
const count2 = createCount();
console.log(count2()); // 1
console.log(count2()); // 2
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';
// console.log("h1 클릭");
// })
// h2El.addEventListener('click', event =>{
// h2IsRed = !h2IsRed
// h2El.style.color = h2IsRed ? 'red': 'black';
// console.log("h2 클릭");
// })
// 하나의 함수로 정리!
const createToggleHandler = () => {
let isRed = false;
return event => {
isRed = !isRed;
event.target.style.color = isRed ? 'red' : 'black';
}
}
h1El.addEventListener('click', createToggleHandler());
h2El.addEventListener('click', createToggleHandler());
// 소괄호를 열고 닫아서 호출 => 호출되는 자리에는 return 키워드로 반환되는 데이터가 남는다.
// createToggleHandler() 자리에는 익명함수가 남게 된다.
</script>
</body>
</html>'JAVASCRIPT' 카테고리의 다른 글
| [JavaScript] Web APIs - Console (0) | 2023.04.28 |
|---|---|
| [JavaScript] Web APIs - Cookie (0) | 2023.04.28 |
| [JavaScript] 쓰레기 수집 (Garbage Collection) (0) | 2023.04.27 |
| [JavaScript] 메모리 누수 (Memory Leak) (0) | 2023.04.27 |
| [JavaScript] 얕은 복사와 깊은 복사 (0) | 2023.04.27 |
