[JavaScript] IIFE(Immediately Invoked Function Expression)

😎 IIFE(Immediately Invoked Function Expression)란?

• 즉시 실행 함수, 함수 선언과 동시에 실행시킴
• (function() {})(); 의 형태를 가짐

( function() { ... } )(); 

함수선언식이 아니고 함수를 실행시키는 괄호

함수 표현식임을

js에게 알려줌

 

실행 컨텍스트 내에서 모든 변수, 함수등이 선언되므로 모든 데이터는 IIFE의 로컬스코프 안에만 저장된다.

이는 전역스코프를 오염시키지 않고, 외부에서 멋대로 IIFE 내부의 값에 접근할 수 없기 때문에 값을 안전하게 보관할 수 있다.

 

var example1 = (function() {
	function a() {
		return 5;
	}
	return {
	a : a // {호출할때 쓰는 이름 : 실제 데이터값}
	}
})(); //즉시실행함수

function a(){ //같은 이름으로 다른 함수 선언, 위에 function a가 IIFE가 아니었다면 값이 혼동될 수 있는 상황
	return 'wow';
}

//실행화면 
> example1.a() 
<< 5

> a()
<< wow

 

실행시키고자 하는 익명 함수를 example1 이라는 변수에 담아둔다. (이 객체는 { a:a } 라는 값을 리턴함)

example1.a() 로 example1에 담긴 a값에 접근할 수 있고, 밖에 있는 a와 헷갈리지 않고 사용할 수 있다.

 

🤔 IIFE는 왜 쓰는데?

• 함수를 즉시 실행시킬 때
• 함수를 딱 한번만 실행시킬 때
• 위의 예시처럼 변수의 사용 범위를 제한하기 위해 (let과 const가 없던 시절에는 특히 소중했었다!)

 

 

👀참고 (감사합니다!)

https://velog.io/@gay0ung/%EC%A6%89%EC%8B%9C%EC%8B%A4%ED%96%89%ED%95%A8%EC%88%98-IIFE

즉시실행함수 = IIFE?

https://zzossig.io/posts/javascript/what_is_iife/

자바스크립트 IIFE란?

https://soldonii.tistory.com/65

자바스크립트에서 전역 변수가 나쁜 이유, 그리고 IIFE