IIFE 패턴
즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression) 은 정의되지마자 즉시 실행되는 javascript function을 말한다.
(function () {
statements
})();()로 둘러싸인 익명함수, 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수 있다.
두 번째 부분은 즉시 실행함수를 생성하는 괄호 () 이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.
예제
(function () {
var aName = "Barry";
})();- IIFE 내부에서 정의된 변수는 외부에서 접근이 불가능하다.
var result = (function(){
var name = "Barry";
return name;
})();
console.log(result); //'Barry'- 즉시 결과를 실행해서 저장한다.
장점
1. 변슈의 스코프 제한
IIFE 패턴을 사용하면 함수 내부에서 선언된 변수는 함수 내에서만 유효합니다. 이를 통해 변수의 스코프를 제한하고 전역 스코프의 오염을 방지할 수 있습니다. 이는 코드 모듈화와 변수 충돌 방지에 도움이 됩니다.
2. 코드의 모듈화
IIFE 패턴을 사용하면 코드를 모듈화할 수 있습니다. 함수 내부에서 정의된 변수와 함수는 함수 내부에서만 유효하므로 외부에서 접근할 수 없습니다. 이를 통해 각 모듈간의 변수 충돌을 방지할 수 있습니다.
3. 캡슐화
IIFE 패턴은 변수와 함수를 캡슐화 하는데 도움을 줍니다. 함수 내부에서 선언된 변수는 함수 외부에서 접근할 수 없으므로 변수와 함수의 독립성과 보호성을 유지할 수 있습니다.
4. 즉시 초기화
IIFE 함수가 건언되지 마자 즉시 실행되므로 초기화 로직을 빠르게 수행할 수 있다.
5. 함수 스코프를 사용한 클로저 생성
IIFE 패턴을 사용하면 클로저를 생성할 수 있습니다. 함수가 즉시 실행되면서 외부로부터 전달받은 인자를 사용하여 내부 함수를 반환할 수 있습니다. 이렇게 반환된 내부 함수는 자신이 생성됐을 때의 스코프를 기억하고 있으므로, 나중에 호출되어도 그 스코프에 접근할 수 있습니다.
클로저란?
클로저는 자바스크립트의 중요한 개념중 하나로, 함수와 그 함수가 선언된 어휘적 환경의 조합입니다.
클로저는 함수가 선언될 때, 해당 함수와 그 함수가 참조하는 외부 변수들로 구성됩니다. 한수 내부에서 선언된 내부 함수가 외부 변수에 접근할 경우, 해당 내부 함수는 클로저를 형성합니다.
이때 클로저는 내부함수와 그 함수가 참조하는 외부 변수들로 구성된 패키지와 같은 개념입니다.
function outerFunction() {
var outerVariable = 'Hello';
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
var closure = outerFunction(); // outerFunction 호출 후 innerFunction 반환
closure(); // 'Hello' 출력클로저의 장점
1. 데이터 보존 및 은닉
내부에서 선언된 변수들을 외부에서 접근할 수 없게 만들수 있다. 즉 캡슐화가 가능해진다.
2. 상태 유지
클로저는 함수가 선언된 시점의 환경을 기억합니다. 따라서 클로저를 통해 함수의 상태를 유지할 수 있습니다. 이느 ㄴ함수가 호출될때마다 초기화 되는 변수를 클로저를 사용하여 유지하거나 함수 호출간에 공유되는 값을 저장하는 등의 상태 관리에 유용합니다.
3. 비동기 처리와 콜백
클로저를 사용하면 비동기적인 작업에서 콜백함수로 사용될 수 있습니ㅏㄷ. 비동기적인 작업이 완료될 때 클로저를 통해 외부 변수에 접근하여 필요한 처리를 할 수 있습니다. 이는 비동기 코드의 상태 및 데이터에 접근하기 위해 클로저를 사용하는 대표적인 상황입니다.
function getData(callback) {
setTimeout(function() {
var data = 'This is the data';
callback(data);
}, 2000);
}
function processData(data) {
console.log('Processed data:', data);
}
getData(processData);4. 모듈 패턴과 정보 은닉
클로저를 사용하면 모듈패턴을 구현할 수 있습니다. 모듈패턴은 변수와 함수를 모듈 내부에 캡슐화하여 필요한 정보를 외부에 노출 시키지 않고 사용하는 방법입니다.
var counterModule = (function() {
var count = 0;
function increment() {
count++;
console.log('Count:', count);
}
function reset() {
count = 0;
console.log('Count reset.');
}
return {
increment: increment,
reset: reset
};
})();
counterModule.increment(); // Count: 1
counterModule.increment(); // Count: 2
counterModule.reset(); // Count reset.- counterModule은 클로저를 형성하는 함수
- 내부에 count변수와 increment, reset함수를 정의
- 모듈은
{ increment: increment, reset: reset }형태의 객체를 반환하여 외부에서 접근 가능한 함수와 메서드 제공 - count에 대한 정보은닉과 모듈패턴을 동시에 구사할 수 있다.
