클로저
2023. 12. 7. 07:53ㆍ웹/프론트-백-javascript
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">안녕하세요.</p>
<button type="button" onclick="changeColor()">배경 색상 변경 </button>
<div id="show"></div>
<script>
var elem = document.getElementById("p1");
const change = ( function () {
let toggle = false;
return function() {
elem.style.backgroundColor = toggle ? 'yellow' : 'pink';
toggle = !toggle;
return toggle; // 값이 잘 바꼈는지 확인하기 위해 리턴
}
})();
function changeColor() {
document.getElementById("show").innerHTML = change(); //웹 브라우저에 변경된 값 출력
}
</script>
</body>
</html>
부모함수가 종료된 후에도 부모함수가 가지고 있는 변수에 접근할 수 있는 기능을 가진 함수
- 전역변수처럼 사용할 수 있으나, 클로저 함수만 접근가능
- 다른 외부에서 이 변수변경은 불가능
반응형
'웹 > 프론트-백-javascript' 카테고리의 다른 글
| [jQuery] 1. jQuery (제이쿼리) 소개 (0) | 2024.02.01 |
|---|