함수는 실행되고 끝나면 변수의 사용도 끝이난다.
그러나 클로저를 사용하면 함수의 사용이 끝이난 후에도 상태를 유지할 수 있다.
전역변수로 하여 상태를 유지 시킬 수 있지만 값이 노출된다는 단점이 있다.
예문1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//함수 f(x) => y
//상태가 없다.
//상태를 유지할 수 있는 방법이 필요
//함수는 1급 객체
//변수의 위치 함수가 가능
const arr = []
for (let i = 0; i < 10 ; i++) {
arr.push(function() {
console.log(i)
})
}
console.log(arr)
console.log("---------------------------------------")
for (let j = 0; j < arr.length; j++) {
arr[j]()
}
</script>
</body>
</html>
예문2(참조)
<!DOCTYPE html>
<html>
<body>
<p>클로저를 사용한 Counting</p>
<button id="inclease">+</button>
<p id="count">0</p>
<script>
var incleaseBtn = document.getElementById('inclease');
var count = document.getElementById('count');
var increase = (function () {
// 카운트 상태를 유지하기 위한 자유 변수
var counter = 0;
// 클로저를 반환
return function () {
return ++counter;
};
}());
incleaseBtn.onclick = function () {
count.innerHTML = increase();
};
</script>
</body>
</html>
★돼지저금통을 기억하자
function pigSave(){
let money = 0
return function (coin){
return money += coin
}
}
const s1 = pigSave()
console.log(s1(500))//500
console.log(s1(400))//900
console.log(s1(100))//1000
Closure | PoiemaWeb
클로저(closure)는 자바스크립트에서 중요한 개념 중 하나로 자바스크립트에 관심을 가지고 있다면 한번쯤은 들어보았을 내용이다. execution context에 대한 사전 지식이 있으면 이해하기 어렵지 않
poiemaweb.com
JavaScript 클로저(Closure)
클로저란?MDN에서는 클로저를 다음과 같이 정의하고 있다. 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’. 흔히 함수 내
hyunseob.github.io
'자바스크립트' 카테고리의 다른 글
| [SweetAlert] alert 창을 예쁘게 (0) | 2022.01.09 |
|---|---|
| 파비콘(favicon) 만들기 (0) | 2021.12.30 |
| 구조 분해 할당 (0) | 2021.11.16 |
| 자바스크립트 Event Target (0) | 2021.11.16 |
| 자바스크립트 버블링 / 캡처링 (0) | 2021.11.16 |