즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)

즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 JavaScript에서 사용되는 디자인 패턴 중 하나로, 함수를 정의하자마자 즉시 호출되는 함수입니다. IIFE는 함수를 감싸고 있는 괄호를 이용해 함수 표현식을 생성하고, 그 다음에 또 다른 괄호를 사용하여 즉시 실행시킵니다. 이렇게 하면 함수 내의 변수와 함수가 외부 스코프에 영향을 주지 않고 독립적으로 실행되게 됩니다.

IIFE는 주로 다음과 같은 경우에 사용됩니다:

1. 전역 스코프에 변수를 추가하지 않고 코드를 캡슐화하고 싶을 때
2. 임시 변수를 사용하여 코드를 구성하고 싶을 때
3. 클로저를 생성하고 싶을 때
IIFE의 기본 구조는 다음과 같습니다:

(function() {
  // 여기에 코드를 작성하세요.
})();

또는 화살표 함수를 사용하여 IIFE를 작성할 수도 있습니다:

(() => {
  // 여기에 코드를 작성하세요.
})();

IIFE는 즉시 호출되므로, 이 안에 있는 코드는 정의와 동시에 실행되고 외부 스코프에 영향을 주지 않습니다. 이를 통해 코드를 모듈화하고 전역 스코프의 오염을 방지할 수 있습니다.

 

$(document).ready(function() { ... }); VS IIFE(즉시 실행 함수 표현식)

 

$(document).ready(function() { ... });는 jQuery를 사용하는 경우에만 적용되며, 이 구문은 페이지의 DOM(Document Object Model)이 완전히 로드된 후에 코드를 실행하도록 보장합니다. 즉, 웹 페이지의 모든 요소와 구조가 완성된 후에만 함수 내의 코드가 실행됩니다. 이러한 방식은 웹 페이지의 요소에 접근하고 조작해야 하는 경우에 특히 유용합니다.

 

반면에 IIFE는 jQuery와 관련이 없으며, JavaScript에서 일반적으로 사용할 수 있는 디자인 패턴입니다. IIFE는 함수를 정의하는 즉시 실행되며, 이를 통해 코드를 캡슐화하고 전역 스코프의 오염을 방지할 수 있습니다. IIFE는 DOM이 완전히 로드될 때까지 기다리지 않고, 스크립트가 실행되자마자 즉시 호출됩니다.

 

결론적으로, $(document).ready(function() { ... });와 IIFE는 비슷한 목적을 가지고 있지만, 사용되는 시점과 적용 대상이 다릅니다. 페이지의 DOM에 접근하여 조작하려면 $(document).ready를 사용하고, 코드를 즉시 실행하고 캡슐화하려면 IIFE를 사용하면 됩니다.