[JAVASCRIPT] IIFE 와 closure 그리고 class

즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript function을 말한다.

-mdn-

(function () {
    statements
})();

첫 번째 괄호는 Grouping Operator 로 둘러 쌓인 익명 함수이고 두 번째 괄호는 즉시 실행 함수를 생성하고 실행하는 괄호이다.

즉시 실행 함수는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 즉시 실행 함수 내부 안으로 다른 변수들을 막을 수 있는 방법이다.

즉시 실행 함수는 자신만의 고유 스코프가 생기기 때문에 함수 내부에서 전역에 있는 변수는 접근이 가능하지만 외부에서 내부 스코프 변수에 접근이 불가능하다. (스코프 규칙을 알면 당연한 것이다.)

const btn3 = document.getElementById('btn3');

let counter = 0;

const handleButton3 = function (e) {
  if (counter >= 3) {
    e.preventDefault();
  } else {
    counter++;
    alert(`${counter}번 누르셨습니다.`);
  }
};

btn3.addEventListener('click', handleButton3);

일반적인 버튼에 카운트를 세어주는 스크립트다.  handler함수는 전역 변수인 counter 변수를 하나씩 올려가면서 그 버튼을 몇 번 누르는지 확인한다. 

만약 저 counter변수를 다른 곳에서도 사용한다면 정상적으로 횟수를 알려줄 수 없게 된다. (버그가 될 가능성이 매우 크다!)

---

const btn2 = document.getElementById('btn2');

const handleButton2 = (function () {
  let counter = 0;
  
  return function (e) {
    if (counter >= 3) {
      e.preventDefault();
    } else {
      counter++;
      alert(`${counter}번 누르셨습니다.`);
    }
  };
})();

btn2.addEventListener('click', handleButton2);

이번에는 즉시 실행 함수와 클로저를 이용, counter변수를 즉시 실행 함수에서 만들고 리턴되는 함수에서 사용하게 된다.

이렇게 된다면 counter변수는 클로저 변수가 되어 사라지지 않고 계속 남아있게 된다. 변수를 전역에 놓지 않고도 count를 할 수 있게 되었다.

---

class AlertCounter {
  constructor() {
    this.count = 0;
  }

  runAlert(e, n) {
    if (this.count >= n) {
      e.preventDefault();
    } else {
      this.count++;
      alert(`${this.count}번 누르셨습니다.`);
    }
  }
}

const handleButton = (function () {
  const alertObj = new AlertCounter();
  return function (e) {
    alertObj.runAlert(e, 3);
  };
})();

btn.addEventListener('click', handleButton);

조금 더 나아가서 내부 함수의 로직을 class로 만들 수도 있다.

이렇게 모듈화를 하면 변수도 숨겨질 뿐만 아니라 로직도 캡슐화되어서 재사용도 쉬워지고, 코드를 읽기가 훨씬 더 쉬워지게 된다.

 

참고

https://velog.io/@doondoony/javascript-iife

https://developer.mozilla.org/ko/docs/Glossary/IIFE