수정하기 - 자바스크립트에서 IIFE(Immediately Invoked Function Expression)란 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

IIFE(Immediately Invoked Function Expression)는 <a href='https://sangseek.com/sangseeks/자바/ko'>자바</a>스크립트에서 즉시 호출되는 <a href='https://sangseek.com/sangseeks/함수 표현식/ko'>함수 표현식</a>을 의미합니다. 이 패턴은 함수가 정의되자마자 즉시 실행되도록 하는 방법으로, 주로 변수의 범위를 제한하고, 코드의 충돌을 방지하며, 클로저를 활용하는 데 유용합니다.       IIFE의 기본 구조IIFE는 다음과 같은 구조를 가지고 있습니다:```javascript(function() {    // 여기에 코드 작성})();```위의 코드에서 괄호로 감싸인 함수는 정의되자마자 호출됩니다. 이 구조는 함수 표현식이기 때문에, 자바스크립트 엔진은 이를 즉시 실행합니다.       IIFE의 사용 목적1.   스코프 제한  : 자바스크립트에서 변수를 선언할 때 `var`, `let`, `const`를 사용하여 변수를 정의합니다. 그러나 이러한 변수들은 함수나 블록의 스코프를 벗어나면 접근할 수 없게 됩니다. IIFE를 사용하면, 함수 내부에서 선언된 변수들은 외부에서 접근할 수 없게 되어, 전역 네임스페이스를 오염시키지 않고도 필요한 변수를 사용할 수 있습니다.   ```javascript   (function() {       var privateVar = "I am private";       console.log(privateVar); // "I am private"   })();   console.log(privateVar); // ReferenceError: privateVar is not defined   ```2.   모듈화  : IIFE는 자바스크립트 모듈 패턴의 기초가 됩니다. 여러 개의 관련된 변수와 함수를 하나의 IIFE로 묶어, 외부에서 접근할 수 없는 모듈을 만들 수 있습니다. 이는 코드의 재사용성과 유지보수성을 높이는 데 기여합니다.   ```javascript   var myModule = (function() {       var privateVar = "I am private";              function privateFunction() {           console.log(privateVar);       }              return {           publicMethod: function() {               privateFunction();           }       };   })();   myModule.publicMethod(); // "I am private"   ```3.   초기화 코드  : IIFE는 초기화 코드나 설정을 실행하는 데 유용합니다. 페이지가 로드될 때 특정 코드를 즉시 실행하고 싶을 때 사용할 수 있습니다.   ```javascript   (function() {       console.log("Page is loaded and this runs immediately.");   })();   ```       IIFE의 변형IIFE는 다양한 형태로 변형될 수 있습니다. 예를 들어, 매개변수를 전달하여 사용할 수 있습니다.```javascript(function(param) {    console.log(param);})("Hello, IIFE!"); // "Hello, IIFE!"```또한, ES6 이후에는 화살표 함수를 사용하여 IIFE를 작성할 수도 있습니다.```javascript(() => {    console.log("This is an IIFE using arrow function.");})();```       결론IIFE는 자바스크립트에서 매우 유용한 패턴으로, 코드의 범위를 제한하고, 모듈화를 통해 코드의 충돌을 방지하며, 초기화 작업을 수행하는 데 도움을 줍니다. 이러한 특성 덕분에 IIFE는 자바스크립트 개발에서 널리 사용되고 있으며, 특히 ES5 이전의 자바스크립트에서 모듈 패턴을 구현하는 데 중요한 역할을 했습니다. ES6의 도입으로 `let`, `const`, 그리고 모듈 시스템이 추가되면서 IIFE의 사용 빈도는 줄어들었지만, 여전히 유용한 패턴으로 남아 있습니다.