클로저

궁굼하다 2023. 12. 7. 07:53

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>

부모함수가 종료된 후에도 부모함수가 가지고 있는 변수에 접근할 수 있는 기능을 가진 함수

전역변수처럼 사용할 수 있으나, 클로저 함수만 접근가능
다른 외부에서 이 변수변경은 불가능