즉시실행함수(IIFE)로 스크립트 충돌 방지하기 + 조건 검사

 

모든 페이지에서 같은 jQuery 코드가 실행되면 오류가 발생하거나, 의미 없는 DOM 탐색이 늘어날 수 잇다. 이를 막기 위한 좋은 방법이 즉시 실행 함수(IIFE)와 조건검사이다.

 

즉시실행함수(IIFE)란?

(function() {
  // 여기에 코드를 넣으면
  // 즉시 실행됨!
})();

 

• 바로 실행되는 익명 함수
• 변수를 전역에 퍼뜨리지 않음(보안, 충돌 방지)
• $나 document, window 등의 범위를 고정할 수 있다.

jQuery에서는 보통 이렇게 쓴다.

(function($) {
  // 여긴 $가 jQuery로 고정됨
  $(function() {
    // DOM ready
  });
})(jQuery);

 

즉시실행함수(IIFE) + 조건검사

(function($) {
  var TabModule = {
    init: function() {
      if (!$('.tab').length) return;
      this.bind();
    },
    bind: function() {
      $('.tab').on('click', function() {
        $('.tab-content').hide();
      });
    }
  };

  $(function() {
    TabModule.init();
  });
})(jQuery);

 

• $() 단독 호출 남발 방지 -> 조건 검사 후 실행
• 외부에 TabModule이 노출되지 않음(IIFE)
• jQuery를 명시적으로 넘겨서 $충돌 방지
• 조건검사 if (!$('.tab').length) return;
  • .tab이라는 요소가 없으면 실행하지 않음. 불필요한 DOM 탐색이나 오류 방지를 위해 꼭 필요함