[JS] 클로저

클로저는 대체 무엇인가 ?

내가 만들어본 것으로 간단한 예시를 들어보자.
버튼을 클릭 했을 때마다 배경색이 파란색, 빨간색이 번갈아가면서 바뀌어야 한다.

/* HTML */
<div class="toggle">
  <h1>최첨단 토글 시스템</h1>
  <button>토글 버튼이라구 ! 톡을</button>
  <h2>버튼을 클릭할 때마다 배경색이 바뀌는 자리</h2>
</div>

/* CSS */
h2 { background: red;}
h2.active { background: blue; }

/* JS */
const button = document.querySelector('button');
const text = document.querySelector('h2');
const actived = 'active';

function textChangHandler() {
  if (text.className === actived) {
    text.className = ""
  } else {
    text.className = actived;
  }
}

button.addEventListener('click', () => textChangHandler())

너무 작동이 잘 된다. 그런데 한가지 의문이 생긴다. 공동작업을 할 때, 이렇게 작업을 하면 똑같은 변수명이 생기면 에러가 생기거나 덮어씌기가 될 수 있다는 문제점이 있고, 그 외에도 다른 문제점이 발생 할 것으로 예상이 되는 코드라고 생각한다.

자, 그럼 여기서는 클로저를 사용해야한다.

클로저를 사용하려면 즉시실행함수 라는 것을 사용해야한다.
< 클로저 = 즉시실행함수 >
한 세트라고 보면 된다.

<!-- 즉시실행 함수 -->
(function (params){
    // 실행코드
})(args);

<!-- 응용 문법 -->
const module = (function (){
  // private code
  return {
  	// public property or method
  }
})();

이것이 즉시실행함수의 문법이다.

결론을 바로 이야기 하자면 클로저를 사용하는 이유는 ❗️모듈화❗️를 하기 위해서다.

: 예시로 들어 보자면 HTML로 마크업을 할때 div안에 두개의 div를 사용하고 블록을 분리해주는 이유와 동일 하다고 생각하면 되겠다.

자, 여기서 그럼 즉시실행함수가 어떤 특징을 가지고 있는지 알아야한다.

즉시실행함수 특징

1. 익명함수를 사용한다.
2. 초기화코드, 모듈화를 시킬 때 사용한다.
3. 딱 1번만 실행되고 다시는 실행되지 않는다.
4. 정의가 되자마자 바로 실행된다.
   
   

클로저를 이용해 만든 코드

위의 처음에 만들었던 코드와 비교를 해보자.

<div class="toggle">
  <p class="toggle_title">최첨단 토글 시스템</p>
  <span class="chang_text">버튼을 클릭할 때마다 배경색이 바뀌는 자리</span>
  <button class="toggle_btn">토글 버튼이라구 ! 톡을 !</button>
</div>

.chang_text { background: red; }
.chang_text.active { background: blue; }

function ToggleChange() { // 1.
  const button = document.querySelector(".toggle_btn");  // 1-1.
  const text = document.querySelector(".chang_text");

  const toggle = (function () {	// 2
    const actived = "active";

    return function () {	// 4
      text.classList.toggle(actived);
    };
  })();

  button.addEventListener("click", toggle);	// 3
}
ToggleChange();

조금 더 실제 작업할 때 상황처럼 class명도 넣어주었다.

1. 큰 틀로 ToggleChange() 함수를 만들어 주었다. ( 큰 div 만들었다고 생각하자. )
   1-1. 그리고 바뀌게 할 button과 text의 찾아주는 변수를 만들어준다.
2. toggle이라는 변수를 만들어주고 그 안에 즉시실행함수를 만들었다.
3. addEventListener를 사용해 클릭시 호출되는 함수를 불러오는 기능을 만들어준다.
4. toggle이라는 변수 안에 함수는 그 안에 작동될 수 있는 값을 지정해주는 actived라는 변수만들어주고 그 actived를 기억한다.
5. toggle함수가 반환하는 리턴값으로 익명함수를 만들어 작동되는 메소드를 이용하여 기능을 만들었다.
   
   

지금 이 경우가 클로저를 사용한 상황이다.

번외 : className 👉🏻 classList를 사용하게 된이유.

처음에는 저 조건문이 먹히지 않자.
className.add(actived) , className.remove(actived) 로 바꿨다.
그랬더니 원래 기존에 class명 까지 지워지면서 active가 붙었다.
원래 가진 class명을 잃어버려서 style이 먹히지 않았다.
다른 방법을 생각해야되겠다 생각을 하면서❗️간단한기능인데 조건문을 사용해서 코드의 줄이 늘어나는 꼴이 너무 효율적이지 못하다 생각을 했고, 그래서 toggle이라는 메소드를 사용하게 되었다.

toggle은 classList와 한 몸인것 같다.
👉🏻 classList.toggle('className');
👉🏻 classList.toggle('className', boolean);

인자가 하나만 사용된 경우, 클래스 값을 토글링한다.
엘리먼트의 class 속성에 인자로 사용된 클래스 값이 존재하면 해당 클래스 값을 제거하고 false를 반환하며, 클래스 값이 존재하지 않는 경우에는 해당 클래스 값을 추가한 뒤 true를 반환한다.

두번째 인자가 존재하는 경우, 그 값에 따라 클래스 값을 추가/삭제한다.
두번째 인수의 값이 true인 경우, 클래스 값을 추가하고, false인 경우에는 클래스 값을 제거한다.

클로저가 유용하게 사용되는 상황

1. 상태유지 : 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것
2. 전역 변수의 사용 억제
3. 정보 은닉
4. var를 사용하게 되어 전역변수가 되었을 상황 (호이스팅관련)

도움받은 블로그
클로저를 검색하다가 저 기능을 만들어 놓고 발견한 블로그다. 만들어 놓고 보니 이해가 빨랐다.
클로저를 마스터는 아니지만 반은 이해했다고 생각하자 ! 항상 겸손 !

참고 사이트
모던 자바스크립트 책이 정리가 잘되어있는 곳이다.

❗️TIP❗️
클로저는 클래스가 나오기 전에 캡슐화 하기 위해 사용했던 기술이다.
지금도 클래스로 작업하고 컴파일을 하게 된다면 클로저로 처리가 된다라는.... ㅎㅎ