[JavaScript] IIFE (즉시 실행 함수)

IIFE

IIFE는 '즉시 실행 함수 표현식'으로, Immediately Invoked Function Expression의 약자이다. 

정의를 함과 동시에 바로 실행이 되는 함수를 말한다.

 

어떻게 사용하나요?

우리가 사용하는 함수 표현식은 아래와 같다.

function add(a, b) {
	return a + b;
}

add(1, 5);

함수를 정의하고, 이후에 호출을 해야 함수가 실행된다.

호출을 하지 않고 함수를 바로 실행할 수 있는 방법이 바로 IIFE이다. 

 

위의 add 함수를 아래와 같이 바꾸면 된다.

(function add(a, b) {
	return a + b;
})();

아주 간단!

아래와 같이 화살표 함수로도 작성이 가능하다.

(() => {
	...
}();

익명 함수로 작성하는 것이 일반적이다.

add 함수는 이해하기 쉽게 그냥 붙여둔 것인데, 이름을 붙였다고 해서 또 다시 호출할 수 있는 것은 아니다.😅

왜, 언제 사용하나요?

1. 전역 스코프를 오염시키지 않기 위해서 사용한다.

IIFE를 사용하면 내부에 선언한 변수가 전역에 영향을 전혀 미치지 않기 때문에 오염시키지 않게 된다.

 

2. 외부에서 접근이 불가능한 변수를 만들 수 있다.

위와 비슷한 내용이다. 함수 내에서만 사용 가능한 변수를 만들어 자체 스코프를 가지게 되어 외부로부터 보호할 수 있다.

 

3. 자바스크립트 모듈을 만들 때 사용한다.

var Data = (function(){
	var showData = function(data){
    	...
    };
    ...
    return {
    	//반환할 객체
    	showData:showData;
    }
})

console.log(Data.showData(data));

---

 

 

참고

https://jongminfire.dev/java-script-%EC%A6%89%EC%8B%9C%EC%8B%A4%ED%96%89%ED%95%A8%EC%88%98-iife

https://developer.mozilla.org/ko/docs/Glossary/IIFE