소개
이 방식은 JavaScript에서 자주 사용되는 패턴으로, 함수 정의와 동시에 즉시 실행되는 함수입니다.
특징
-
전역 변수 보호
IIFE를 사용하는 주요 이유 중 하나는 전역 변수 오염을 방지하기 위해서입니다. JavaScript에서는 변수가 기본적으로 전역 스코프에서 정의되기 때문에, 전역 스코프에서 정의된 변수나 함수들이 서로 충돌할 수 있습니다. IIFE를 사용하면, 그 안에서 정의된 변수나 함수들은 그 함수 내부에서만 유효하고, 외부로 노출되지 않으므로 전역 스코프의 오염을 방지할 수 있습니다.
예를 들어, 전역에서 startCounter라는 함수가 이미 정의되어 있다면, IIFE 내부에서 같은 이름으로 함수를 정의해도 전역에서 정의된 startCounter와 충돌하지 않습니다.
-
변수 캡슐화 (Encapsulation)
IIFE는 함수 내부에서만 변수를 사용할 수 있도록 캡슐화할 수 있게 합니다. IIFE 안에서 선언된 변수들은 외부에서 접근할 수 없기 때문에, 코드의 유지보수성이나 확장성을 높이고, 코드의 다른 부분과 충돌하지 않도록 할 수 있습니다.
예를 들어, IIFE 내부에서 startCounter와 같은 변수나 함수가 정의되어 있으면, 그들은 오직 IIFE 내에서만 유효하고, 다른 코드에서 이를 참조하거나 수정할 수 없습니다.
-
즉시 실행
IIFE의 또 다른 특징은 함수를 정의함과 동시에 즉시 실행된다는 점입니다. 이를 통해 정의한 함수를 바로 실행할 수 있으므로, 코드를 작성할 때 함수를 한 번만 실행하고, 별도의 함수 호출을 하지 않고도 필요한 작업을 즉시 수행할 수 있습니다.
- 예시 코드
(function() {
// IIFE 내부에서만 사용되는 변수나 함수들
const message = "I am inside an IIFE!";
console.log(message); // 출력: I am inside an IIFE!
})();위 코드에서 message 변수는 IIFE 내에서만 사용되며, 외부에서 접근할 수 없습니다. 또한, IIFE는 함수가 정의된 직후 바로 실행됩니다.
IIFE를 쓰는 이유?
(function() {}): 첫 번째 괄호는 함수 표현식(function expression)을 감싸는 것입니다. JavaScript에서 function 키워드는 함수 선언을 할 때 사용되는데, 함수 선언은 코드 블록 외부에서 사용할 수 있도록 이름을 지정하고 선언합니다. 그러나 즉시 실행하려면, 함수 표현식이어야 하므로 function을 괄호로 감싸서 함수 표현식으로 만들고, 즉시 실행할 수 있도록 합니다.
(): 함수 표현식 뒤의 괄호는 그 함수를 즉시 실행하기 위한 것입니다. 괄호 안에서 함수 정의가 끝난 후, ()를 통해 바로 실행하도록 지시합니다.
- 예시 코드
(function() {
var message = "Hello, world!";
console.log(message);
})();
// 즉시 실행되어 "Hello, world!"가 출력됩니다.
// `message`는 IIFE 내부에서만 유효하므로, 외부에서 `message`를 참조할 수 없습니다.
위 예시에서 message는 IIFE 내부에서만 유효하고, IIFE 외부에서는 접근할 수 없습니다. 이렇게 IIFE를 사용하면 전역 스코프에 불필요한 변수를 남기지 않고, 코드가 다른 부분과 충돌하지 않도록 관리할 수 있습니다.
결론
(function() {})() 형태로 작성된 코드는 즉시 실행 함수 표현식 (IIFE)으로, 주로 전역 변수를 보호하고, 변수의 캡슐화와 즉시 실행을 위해 사용됩니다. JavaScript에서 IIFE는 전역 공간을 깨끗하게 유지하며, 안전하게 코드를 실행하는 방법 중 하나로 널리 사용됩니다.
