Code개발일지

[JS] 클로저

Minhhk 2022. 11. 7. 15:33

"변수 및 함수 선언의 형태”

클로저 함수

  • 클로저 함수의 특징
    • 클로저 함수의 첫 번째 특징은 클로저 함수는 함수를 리턴하는 함수로 함수를 리턴하는 함수가 클로저의 형태를 만든다.
    • 클로저 함수의 두 번째 특징은 내부 함수는 외부 함수에 선언된 변수에 접근 가능하다.
    • 클로저의 활용
      • 데이터를 보존하는 함수
        • 외부 함수의 실행이 끝나더라도, 외부 함수 내 변수를 사용할 수 있다.

        • HTML 문자열을 만들 수 있다. (클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게 해줍니다.)
      • 정보의 접근 제한
        • 클로저 모듈 패턴을 내부 함수를 단 하나만 리턴하는 것에 그치지 않고, 객체에 담아 여러 개의 내부 함수를 리턴하도록 만든다.
        • 다만 외부 스코프에서는 내부 스코프의 변수에 접근할 수 없다라는 규칙에 의해, 어떤 경우에도 'value'는 직접 수정이 불가능하다. 대신. 리턴하는 객체가 제공하는 메서드를 통해 'value' 값을 간접적으로 조작할 수 있다. 이것이 바로 정보의 접근 제한(캡슐화)이다.
        • 클로저를 통해 불필요한 전역 변수 사용을 줄이고, 스코프를 이용해 값을 보다 안전하게 다룰 수 있다.
      • 모듈화
        • 함수 재사용성을 극대화하여, 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것을 모듈화라고 한다.
        • 클로저를 통해 데이터와 메서드를 같이 묶어서 다룰 수 있다. 즉, 클로저는 모듈화에 유리하다.
toggle 버튼을 누르면 box가 사라지고 생긴다.클로저 함수

 

<!DOCTYPE html>
<html>
<body>
  <button class="toggle">toggle</button>
  <div class="box" style="width: 100px; height: 100px; background: red;"></div>

  <script>
    var box = document.querySelector('.box');
    var toggleBtn = document.querySelector('.toggle');

    var toggle = (function () {
      var isShow = false;

      // TODO: ① 클로저를 반환하는 함수를 작성하세요.
      return function () {
					box.style.display = isShow ? 'block' : 'none';
        // TODO: ③ isShow 변수의 상태를 변경하는 코드를 작성하세요.
			    isShow = !isShow;
      };
    })();

    // ② 이벤트 프로퍼티에 클로저를 할당
    toggleBtn.onclick = toggle;
  </script>
</body>
</html>

 

저작자표시