javaScript/jQuery
즉시실행함수(IIFE)로 스크립트 충돌 방지하기 + 조건 검사
mooyou
2025. 4. 25. 22:38
728x90
300x250
SMALL
모든 페이지에서 같은 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 탐색이나 오류 방지를 위해 꼭 필요함
728x90
반응형
LIST