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

Q1: IIFE란 무엇인가요?
A1: IIFE(Immediately Invoked Function Expression)는 정의와 동시에 즉시 실행되는 자바스크립트 함수 표현식을 말합니다. 주로 함수의 변수 범위를 제한하거나 초기화 작업에 활용됩니다.

Q2: IIFE가 왜 필요한가요?
A2: 자바스크립트에는 함수 단위 스코프가 존재하여 전역 변수 오염을 막기 위해 IIFE를 사용하면 지역 변수처럼 작동하는 독립된 스코프를 생성할 수 있습니다. 따라서 전역 네임스페이스의 충돌을 피하고 모듈화된 코드를 작성할 수 있습니다.

Q3: IIFE의 기본 문법은 어떻게 되나요?
A3: 전형적인 IIFE 문법은 다음과 같습니다.
```javascript
(function() {
// 코드 작성
})();
```
또는 화살표 함수로도 작성할 수 있습니다.
```javascript
(() => {
// 코드 작성
})();
```

Q4: 왜 괄호로 감싸나요?
A4: 함수 선언문과 함수 표현식의 구분을 위해서입니다. 함수 선언문은 바로 실행할 수 없으므로 함수 표현식으로 만든 뒤 즉시 호출하기 위해 전체를 괄호(())로 감싸 함수로 인식하게 만듭니다.

Q5: IIFE에서 인자를 전달할 수 있나요?
A5: 네, 가능합니다. 함수 파라미터에 값을 넣어 호출할 수 있습니다. 예:
```javascript
(function(name) { console.log(`Hello, ${name}`);
})('Alice');
```

Q6: IIFE가 주로 사용되는 사례는 어떤 것이 있나요?
A6:
- 변수 또는 함수 범위 은닉
- 초기화 코드 실행
- 모듈 패턴 구현
- 비동기 함수에서 클로저 문제 해결

Q7: ES6 이후에도 IIFE가 필요한가요?
A7: ES6부터 let, const, 블록 스코프 등이 도입되어 전역 오염 문제는 줄었지만, 특정 즉시 실행과 스코프 격리가 필요한 경우 여전히 유용합니다.

Q8: IIFE가 저장된 값은 어떻게 사용할 수 있나요?
A8: IIFE는 즉시 실행되며 반환값을 변수에 할당할 수 있습니다. 예:
```javascript
const result = (function() {
return 42;
})();
console.log(result); // 42
```

Q9: IIFE를 사용하면 성능에 영향을 주나요?
A9: IIFE는 일반 함수 호출과 유사한 비용이 발생하며 일반적으로 성능 문제를 일으키지 않습니다. 코드 구조와 스코프 관리 측면에서 이점이 큽니다.

Q10: IIFE와 함수 선언문의 차이는 무엇인가요?
A10: 함수 선언문은 나중에 호출하는 형태이며, 호이스팅에 의해 함수가 미리 정의됩니다. IIFE는 함수 표현식을 즉시 실행하는 형태로, 일반적으로 변수나 상수에 할당하지 않고 바로 실행합니다.

IIFE(Immediately Invoked Function Expression)는 자바스크립트에서 즉시 호출되는 함수 표현식을 의미합니다.

이 패턴은 함수가 정의되자마자 즉시 실행되도록 하는 방법으로, 주로 변수의 범위를 제한하고, 코드의 충돌을 방지하며, 클로저를 활용하는 데 유용합니다.

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의 사용 빈도는 줄어들었지만, 여전히 유용한 패턴으로 남아 있습니다.